1
0

index.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Demo Google Sign-In</title>
  6. <link
  7. href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
  8. rel="stylesheet"
  9. integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
  10. crossorigin="anonymous"
  11. />
  12. <script src="https://apis.google.com/js/platform.js" async defer></script>
  13. <meta
  14. name="google-signin-client_id"
  15. content="679803294668-lvdkgml50ldqv8pnhv9gonj35k2aruvt.apps.googleusercontent.com"
  16. />
  17. </head>
  18. <body>
  19. <div class="container">
  20. <h1>Google Auth Demo</h1>
  21. <div class="row">
  22. <div class="col">
  23. <div class="g-signin2" data-onsuccess="onSignIn"></div>
  24. </div>
  25. <div class="col">
  26. <button id="sign-out" class="btn btn-secondary">Sign out</button>
  27. </div>
  28. </div>
  29. <div class="mt-4 row">
  30. <div class="card" style="width: 18rem;">
  31. <div class="card-header" id="header">
  32. Result
  33. </div>
  34. <div class="card-body" id="result"></div>
  35. </div>
  36. </div>
  37. </div>
  38. <script>
  39. const signOutLink = document.querySelector('#sign-out');
  40. const header = document.querySelector('#header');
  41. const result = document.querySelector('#result');
  42. signOutLink.addEventListener('click', signOut);
  43. function signOut() {
  44. var auth2 = gapi.auth2.getAuthInstance();
  45. auth2.signOut().then(function () {
  46. console.log('User signed out.');
  47. });
  48. }
  49. function onSignIn(googleUser) {
  50. graphQlQuery(
  51. `
  52. mutation Authenticate($token: String!) {
  53. authenticate(input: {
  54. google: { token: $token }
  55. }) {
  56. user {
  57. id
  58. identifier
  59. }
  60. }
  61. }
  62. `,
  63. {
  64. token: googleUser.getAuthResponse().id_token,
  65. },
  66. )
  67. .then((res) => {
  68. console.log(res);
  69. return graphQlQuery(
  70. `{
  71. activeCustomer {
  72. id
  73. firstName
  74. lastName
  75. phoneNumber
  76. emailAddress
  77. user {
  78. id
  79. identifier
  80. }
  81. }
  82. }`,
  83. {},
  84. );
  85. })
  86. .then((res) => {
  87. header.innerText = 'Signed in!'
  88. result.innerHTML = `<pre>${JSON.stringify(res, null, 2)}</pre>`;
  89. console.log(res);
  90. });
  91. }
  92. let bearerToken;
  93. // @ts-check
  94. function graphQlQuery(query, variables) {
  95. return fetch('http://localhost:3000/shop-api', {
  96. method: 'POST',
  97. headers: {
  98. 'Content-Type': 'application/json',
  99. Accept: 'application/json',
  100. ...(bearerToken ? { Authorization: `Bearer ${bearerToken}` } : {}),
  101. },
  102. body: JSON.stringify({ query, variables }),
  103. }).then((r) => {
  104. if (r.headers.has('vendure-auth-token')) {
  105. bearerToken = r.headers.get('vendure-auth-token');
  106. }
  107. return r.json()
  108. });
  109. }
  110. </script>
  111. </body>
  112. </html>