I have an app where I need to migrate to the new google identity service sign in methods. For several days I am stuck on this issue and I have no idea how to do it, the documentation that google provides seems really confusing for me, so I came here to ask for the help.
My current sign in consists of several parts:
The html file:
<html lang="en" class="clicking">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title><%= title %></title>
<link rel="stylesheet" href="/css/app<%= version %>.css?"/>
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico"/>
<% include partials/_hotjar.ejs %>
<% include partials/_googleAnalytics.ejs %>
</head>
<body id="account">
<% include partials/_googleTagManagerNoScript.ejs %>
<% include partials/header.ejs %>
<div id="application"></div>
<% include partials/footer.ejs %>
<script src="//apis.google.com/js/client.js"></script>
<script type="application/javascript">
window.ENVIRONMENT = '<%= process.env.NODE_ENV %>';
</script>
<script type="text/javascript" src="/js/app<%= version %>.js"></script>
<script type="application/javascript">
APP.init();
</script>
</body>
</html>
I guess here I need to include the new script file that google provides?
The app.jsx file:
gapi.load('auth2', () => gapi.auth2.init({
client_id: Config.googlePlus.clientId,
}));
What do I need to update here, as you can see I am using the gapi
method, but what would be the new one, I do not get from the library.
The login component:
let auth2 = gapi.auth2.getAuthInstance(); auth2.grantOfflineAccess({redirect_uri: 'postmessage'})
What would be the replacement from the new method?
If you can help me with this, I would gladly appreciate it, thanks in advance!
The process has three steps
Step 1: Load script
Include this script https://accounts.google.com/gsi/client
Step 2: Initiate a client
When user clicks the Sign in with google
button you have to initiate the client using
const client = window.google.accounts.oauth2.initTokenClient(params);
Here the params are
{
client_id: <your_client_id>,
callback: <success_callback_function>,
scope: <your_auth_scopes>,
error_callback: <error_callback_function>,
}
Step 3: Request token using the client
After the client is loaded request for access token
client.requestAccessToken();
All together
const handleSuccessResponse = (response) => {
console.log(response.access_token)
}
const handleErrorResponse = (response) => {
console.log(response)
}
const signInWithGoogle = () => {
// create params
const params = {
client_id: <your_client_id>,
callback: handleSuccessResponse,
scope: <your_auth_scopes>,
error_callback: handleErrorResponse,
}
// create client
const client = window.google.accounts.oauth2.initTokenClient(params);
// Request token
client.requestAccessToken();
}