I'm trying to develop a simple ProofOfConcept to interract with Google APIs from a Google Home using the authorization of the user through Dialogflow Fullfilment.
For example, we want to be able to create/read/update/delete contacts of users.
It's relatively easy to implement the Google SignIn but I don't know how to ask for additionnal scopes
Also, I never implemented an OAuth server before and I'm still not sure if I need too or if I could reuse en existing one.
I looked at many posts here on SO most of them was answered by #Prisoner who also provided a detailed flow in Google Home Authorization Code and Authentication with Google Account
In his answer, he mentions that we can "redirect the user to a web login page" but I still don't understand how to do that from the fullfilment
Here's the fullfilment code I used to use the Google SignIn:
//requirements
const { dialogflow, SignIn} = require('actions-on-google');
const functions = require('firebase-functions');
//initialisation
const app = dialogflow(
{
debug: true,
// REPLACE THE PLACEHOLDER WITH THE CLIENT_ID OF YOUR ACTIONS PROJECT
clientId: '1111111111111-aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.apps.googleusercontent.com'
});
//Welcome Intent
app.intent('Default Welcome Intent', (conv) => {
conv.ask(`Welcome to the demo agent, say "Connect-me" to proceed`);
});
//Default Intent
app.intent('Default Fallback Intent', (conv) => {
conv.ask(`Sorry, can you repeat please?`);
});
//Intent starting the Google SignIn
// Create an intent with the name "Start Signin"
app.intent('Start Signin', (conv) => {
//SignIn Helper (https://developers.google.com/actions/assistant/helpers#account_sign-in)
conv.ask(new SignIn(`Need to identify you`));
});
//Intent called when the user complete the authentication
// Create an intent with the name "Get Signin" and assign it the event "actions_intent_SIGN_IN"
app.intent('Get Signin', (conv, params, signin) => {
if (signin.status === 'OK') {
const payload = conv.user.profile.payload;
conv.ask(`Hello ${payload.name}. You can now access your contacts informations... but not really `);
} else {
conv.ask(`Sorry but you should authentify yourself `);
}
});
//Example of intent that I would like to make it works
app.intent('How many contacts', (conv) => {
/*
TODO: How to ask for additional scopes ("https://www.google.com/m8/feeds/" : read/write access to Contacts and Contact Groups)
NOTE: Actually, I'm more interrested on how to get the additional scopes.
I could probably do the querying contacts part by myself since it's quite documented (https://developers.google.com/contacts/v3/)
*/
conv.ask(new SignIn(`You have ${nbContacts} contacts defined in your Google Contact`));
});
exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);
You have a few related questions bundled here.
How do I ask for additional scopes with Google Sign In?
Unfortunately you can't.
This is for the user's security. Since it isn't always obvious when you're granting additional permissions via voice, and asking for too many scopes can be overwhelming with voice, they don't allow this right now.
Ok. So how do I get those additional scopes?
You referenced another post that goes through the method I propose to do that. It involves signing in and granting the scopes through a web page in the same Google Cloud Project. Under Google's cross-client identity system, these would then apply when the user connects through the Assistant as well.
So how do I direct them to a web page?
I typically either use a card with a link button for the website or a link out suggestion to the site. Both of these, however, depend on being on a visual interface that supports a web browser. So you might wish to check for this using surface capabilities.
If you are using your own OAuth server, using the combination "OAuth and Google Sign-In" method, the Assistant will take care of these sorts of things for you.
Do I need to write my own OAuth server?
No. You can use something like Auth0 to handle the OAuth part for you.
Related
I'm using Supabase for auth, and I want to set a user as logged-in using my custom logic. I'm looking for something like the following:
if (logic-that-checks-if-user-performed-authentication-criteria) {
supabase.auth.setUserAsLoggedIn({email: "user#email.com"});
}
Is there some way I can do this?
Clarification:
logic-that-checks-if-user-performed-authentication-criteria would be my own custom authentication criteria, not Supabase's.
More context:
I want to add Twitter OAuth2 support as Supabase doesn't support it by default. I want to have my own API routes for handling Twitter OAuth2, and the related credentials would be stored either as user_metadata in Supabase's auth table or in my custom user table.
The user would be required to sign up with email-with-magic-link (usual Supabase code). But once they have signed up, they would have an option to connect their Twitter account (my code).
After they have connected their Twitter, they would be given an option to sign in with Twitter alongside the usual email-with-magic-link method. This part would require my original question, I would need to set the user as logged-in after I verify that the user has logged in with Twitter and the Twitter profile matches with the one I have saved in my DB.
As far as Supabase is concerned, a user is signed in if they are signed in with magic link.
It sounds like what you want to know is whether a user has gone through the Twitter OAuth flow or not. In that case, user metadata might be a good place to store that information.
Once a user goes through the Twitter OAuth flow, you could call the following code to store the fact that the user has gone through Twitter's OAuth flow.
const { data, error } = await supabase.auth.updateUser({
data: { hasLinkedTwitter: true }
})
You would be able to retrieve this information from the User object like this:
const { data, error } = await supabase.auth.getUser();
data.user?.user_metadata.hasLinkedTwitter
The Firebase Web-App guide states I should put the given apiKey in my Html to initialize Firebase:
// TODO: Replace with your project's customized code snippet
<script src="https://www.gstatic.com/firebasejs/3.0.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: '<your-api-key>',
authDomain: '<your-auth-domain>',
databaseURL: '<your-database-url>',
storageBucket: '<your-storage-bucket>'
};
firebase.initializeApp(config);
</script>
By doing so, the apiKey is exposed to every visitor.
What is the purpose of that key and is it really meant to be public?
The apiKey in this configuration snippet just identifies your Firebase project on the Google servers. It is not a security risk for someone to know it. In fact, it is necessary for them to know it, in order for them to interact with your Firebase project. This same configuration data is also included in every iOS and Android app that uses Firebase as its backend.
In that sense it is very similar to the database URL that identifies the back-end database associated with your project in the same snippet: https://<app-id>.firebaseio.com. See this question on why this is not a security risk: How to restrict Firebase data modification?, including the use of Firebase's server side security rules to ensure only authorized users can access the backend services.
If you want to learn how to secure all data access to your Firebase backend services is authorized, read up on the documentation on Firebase security rules. These rules control access to file storage and database access, and are enforced on the Firebase servers. So no matter if it's your code, or somebody else's code that uses you configuration data, it can only do what the security rules allow it to do.
For another explanation of what Firebase uses these values for, and for which of them you can set quotas, see the Firebase documentation on using and managing API keys.
If you'd like to reduce the risk of committing this configuration data to version control, consider using the SDK auto-configuration of Firebase Hosting. While the keys will still end up in the browser in the same format, they won't be hard-coded into your code anymore with that.
Update (May 2021): Thanks to the new feature called Firebase App Check, it is now actually possible to limit access to the backend services in your Firebase project to only those coming from iOS, Android and Web apps that are registered in that specific project.
You'll typically want to combine this with the user authentication based security described above, so that you have another shield against abusive users that do use your app.
By combining App Check with security rules you have both broad protection against abuse, and fine gained control over what data each user can access, while still allowing direct access to the database from your client-side application code.
Building on the answers of prufrofro and Frank van Puffelen here, I put together this setup that doesn't prevent scraping, but can make it slightly harder to use your API key.
Warning: To get your data, even with this method, one can for example simply open the JS console in Chrome and type:
firebase.database().ref("/get/all/the/data").once("value", function (data) {
console.log(data.val());
});
Only the database security rules can protect your data.
Nevertheless, I restricted my production API key use to my domain name like this:
https://console.developers.google.com/apis
Select your Firebase project
Credentials
Under API keys, pick your Browser key. It should look like this: "Browser key (auto created by Google Service)"
In "Accept requests from these
HTTP referrers (web sites)", add the URL of your app (exemple: projectname.firebaseapp.com/* )
Now the app will only work on this specific domain name. So I created another API Key that will be private for localhost developement.
Click Create credentials > API Key
By default, as mentioned by Emmanuel Campos, Firebase only whitelists localhost and your Firebase hosting domain.
In order to make sure I don't publish the wrong API key by mistake, I use one of the following methods to automatically use the more restricted one in production.
Setup for Create-React-App
In /env.development:
REACT_APP_API_KEY=###dev-key###
In /env.production:
REACT_APP_API_KEY=###public-key###
In /src/index.js
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
// ...
};
I am not convinced to expose security/config keys to client. I would not call it secure, not because some one can steal all private information from first day, because someone can make excessive request, and drain your quota and make you owe to Google a lot of money.
You need to think about many concepts from restricting people not to access where they are not supposed to be, DOS attacks etc.
I would more prefer the client first will hit to your web server, there you put what ever first hand firewall, captcha , cloudflare, custom security in between the client and server, or between server and firebase and you are good to go. At least you can first stop suspect activity before it reaches to firebase. You will have much more flexibility.
I only see one good usage scenario for using client based config for internal usages. For example, you have internal domain, and you are pretty sure outsiders cannot access there, so you can setup environment like browser -> firebase type.
The API key exposure creates a vulnerability when user/password sign up is enabled. There is an open API endpoint that takes the API key and allows anyone to create a new user account. They then can use this new account to log in to your Firebase Auth protected app or use the SDK to auth with user/pass and run queries.
I've reported this to Google but they say it's working as intended.
If you can't disable user/password accounts you should do the following:
Create a cloud function to auto disable new users onCreate and create a new DB entry to manage their access.
Ex: MyUsers/{userId}/Access: 0
exports.addUser = functions.auth.user().onCreate(onAddUser);
exports.deleteUser = functions.auth.user().onDelete(onDeleteUser);
Update your rules to only allow reads for users with access > 1.
On the off chance the listener function doesn't disable the account fast enough then the read rules will prevent them from reading any data.
I believe once database rules are written accurately, it will be enough to protect your data. Moreover, there are guidelines that one can follow to structure your database accordingly. For example, making a UID node under users, and putting all under information under it. After that, you will need to implement a simple database rule as below
"rules": {
"users": {
"$uid": {
".read": "auth != null && auth.uid == $uid",
".write": "auth != null && auth.uid == $uid"
}
}
}
}
No other user will be able to read other users' data, moreover, domain policy will restrict requests coming from other domains.
One can read more about it on
Firebase Security rules
While the original question was answered (that the api key can be exposed - the protection of the data must be set from the DB rulles), I was also looking for a solution to restrict the access to specific parts of the DB.
So after reading this and some personal research about the possibilities, I came up with a slightly different approach to restrict data usage for unauthorised users:
I save my users in my DB too, under the same uid (and save the profile data in there). So i just set the db rules like this:
".read": "auth != null && root.child('/userdata/'+auth.uid+'/userRole').exists()",
".write": "auth != null && root.child('/userdata/'+auth.uid+'/userRole').exists()"
This way only a previous saved user can add new users in the DB so there is no way anyone without an account can do operations on DB.
Also adding new users is posible only if the user has a special role and edit only by admin or by that user itself (something like this):
"userdata": {
"$userId": {
".write": "$userId === auth.uid || root.child('/userdata/'+auth.uid+'/userRole').val() === 'superadmin'",
...
EXPOSURE OF API KEYS ISN'T A SECURITY RISK BUT ANYONE CAN PUT YOUR CREDENTIALS ON THEIR SITE.
Open api keys leads to attacks that can use a lot resources at firebase that will definitely cost your hard money.
You can always restrict you firebase project keys to domains / IP's.
https://console.cloud.google.com/apis/credentials/key
select your project Id and key and restrict it to Your Android/iOs/web App.
It is oky to include them, and special care is required only for Firebase ML or when using Firebase Authentication
API keys for Firebase are different from typical API keys:
Unlike how API keys are typically used, API keys for Firebase services are not used to control access to backend resources; that can only be done with Firebase Security Rules. Usually, you need to fastidiously guard API keys (for example, by using a vault service or setting the keys as environment variables); however, API keys for Firebase services are ok to include in code or checked-in config files.
Although API keys for Firebase services are safe to include in code, there are a few specific cases when you should enforce limits for your API key; for example, if you're using Firebase ML or using Firebase Authentication with the email/password sign-in method. Learn more about these cases later on this page.
For more informations, check the offical docs
I am making a blog website on github pages. I got an idea to embbed comments in the end of every blog page. I understand how firebase get and gives you data.
I have tested many times with project and even using console. I am totally disagree the saying vlit is vulnerable.
Believe me there is no issue of showing your api key publically if you have followed privacy steps recommend by firebase.
Go to https://console.developers.google.com/apis
and perfrom a security steup.
You should not expose this info. in public, specially api keys.
It may lead to a privacy leak.
Before making the website public you should hide it. You can do it in 2 or more ways
Complex coding/hiding
Simply put firebase SDK codes at bottom of your website or app thus firebase automatically does all works. you don't need to put API keys anywhere
I'm trying to integrate my bot too the Hangouts Chat API. I migrated from C# to node.js in order to be able to take advantage of the HangoutsAdapter: https://botkit.ai/docs/v4/platforms/hangouts.html
The problem is that the HangoutsAdapter expects a google token and when I go to the Hangouts Chat API configuration tab, I select Bot URL under Connection Settings section, but the only thing I get is a field to enter my bot's url endpoint. Nothing about the Verification Token I'm supposed to pass to the Hangouts Adapter.
Is there any other way to validate the connection to that API with HangoutsAdapter? Should I use something else rather than HangoutsAdapter? Or maybe I should use it in a different way?
Technically, this is an alternative solution (I think). In order to create Google Hangouts credentials a GSuite account is required, which I don't have. The Interface HangoutsAdapterOptions docs state the "Shared secret token [is] used" for validation and is found under the Configuration tab. As the fields are locked down, I can't test this.
However, the alternative is to use the built-in OAuth feature of the Bot Framework. I use this in my bot without a hitch. I did navigate to the Google Hangouts web site and it recognized me immediately. By using the OAuth login, a token is returned which you can use to pass into the Hangouts adapter.
I should add that the below implementation produces a sign-in magic code which some people don't like (it doesn't bother me). There may be a SSO option, but I haven't researched that.
First, you need to setup Google credentials which will provide you with a "Client id" and "Client secret". General instructions can be found here. Credentials can be created here. You can ignore any coding references as they aren't necessary (thanks to the BF OAuth feature).
From the Credentials Page, click on "Credentials" in the left menu. There are two areas you need to configure, once there: "OAuth consent screen" and "Credentials".
For OAuth consent screen, provide an app name. This doesn't need to match the associated requesting app and is just for reference when visiting the Credentials Page. Enter a support email, the scopes you will be using (email, profile, and openid). There may be other required scopes, but this worked for me when I visited the Hangouts web site. Lastly, enter in the Authorized Domains. The botframework.com domain is required. Others, if any, you will have to experiment with. Save and return to the Credentials Page.
Click the "Create Credentials" button and complete the form. Give your credentials a name (again, not referenced anywhere else for this project), enter any authorized origins, and enter https://token.botframework.com/.auth/web/redirect as the authorized redirect URI. Save the settings, copy the "Client id" and "Client secret" somewhere, and navigate to Azure and into your bot's settings page.
Here, you need to create your bot's OAuth connection. This is done in the Settings blade. At the bottom of the blade is the "OAuth Connection Settings" section. Click the "Add Setting" button to get started.
Once in, give your connection a name. This name will be referenced by your bot in the next step, so save the name somewhere. Then, select Google from the list of Service Providers and paste the "Client id" and "Client secret", that you saved earlier, into the respective fields. In "Scopes", you will want to enter the same scope values you selected in your Google credentials app ("email profile openid"). Be sure they are space-separated when you enter them.
Lastly, you will want to model your OAuth login off of sample 18.bot-authentication from the Botbuilder-Samples repo. This builds in the functionality you need for enabling a user to log in via your bot.
Add the connection name you assigned to your Google connection setting for your bot into a .env file as a variable, like this: connectionName=<CONNECTION_NAME>.
When setting up the OAuth prompt, you will pass this variable in:
this.addDialog(new OAuthPrompt(OAUTH_PROMPT, {
connectionName: process.env.connectionName,
text: 'Please Sign In',
title: 'Sign In',
timeout: 300000
}));
At this point, your bot and login process should be good to go. Assuming the flow is setup correctly, a user should be able to login via the OAuth prompt, by use of a magic code. A token is returned back to the bot which will be accessible via the context on the next step. The token can then be saved to state and passed to the adapter for use. In the below bit, I'm using a simple waterfall with an oauthPrompt step and a loginResults step. The token is captured in the second step where I console log it.
async oauthPrompt(step) {
return await step.prompt(OAUTH_PROMPT, {
prompt: {
inputHint: 'ExpectingInput'
}
});
}
async loginResults(step) {
let tokenResponse = step.result;
console.log('TOKEN: ', tokenResponse);
if (tokenResponse != null) {
await step.context.sendActivity('You are now logged in.');
return await step.prompt(CONFIRM_PROMPT, 'Do you want to view your token?', ['yes', 'no']);
}
// Something went wrong, inform the user they were not logged in
await step.context.sendActivity('Login was not successful please try again');
return await step.endDialog();
}
Hope of help!
I created an issue on https://github.com/howdyai/botkit/issues/1722
Basically hangouts adapter expects a token in order to compare it to the token gotten from the hangouts chat api. But given that the token is not provided anymore by google, the authentication mechanism needs to change
I need to extract information from videos using YouTube Analytics and Reporting Api.
I have access to multiple YouTube Brand Accounts, when I log into YouTube with my Google Account.
Using the "Try it" for testing the API, I'm only able to retrieve data for a channel once I switch to the Brand Account that this channel belongs, otherwise I get 403 - Forbidden error.
Is there any way to extract data using the Google Account that I'm using to log in? Because once I create the credentials in developers console, they will be associated to the Google Account and not to the Brand Accounts.
My google account has Manager Role on the brand accounts.
I've search for the onBehalfOfContentOwner field to be used in requests, but I don't know how to get this ID, and I'm not sure if this is applicable in my situations, since we're talking about Brand Accounts, correct me if I'm wrong.
I fought with this just two days ago. Turns out it IS possible, it's just undocumented and works a bit differently than you'd expect:
Once I create the credentials in developers console, they will be associated to the Google Account and not to the Brand Accounts.
I had the same exact misconception when I first tried (even went so far as to find out the brand account's client_id). Turns out you don't want to use the brand's oauth info -- you want to use your own client_id/client_secret to create a refresh token on behalf of the brand account then use that to create auth tokens.
Steps:
Using your main account create an oauth client_id and client_secret via https://console.developers.google.com/apis/credentials
Edit the client_id/client_secret entry you just added and add "https://developers.google.com/oauthplayground" to the "Authorized redirect URIs" at the bottom of the page.
We're going to create a refresh token the lazy way. Go to https://developers.google.com/oauthplayground/
Click the gears on the top right corner and set access type to "offline", then click "Use your own OAuth credentials" and enter the client_id and client_secret you created in step 1.
Select the scopes you want to give it access to. Click authorize APIs.
Here's the magic bit: You'll now be asked to "Choose an account". Choose the brand account you want to access here, NOT your main account. Since you have permission to access it this'll work fine even though you're using your own client_id and client_secret
Allow the permission access when it prompts you, then you'll be brought back to the oauth playground.
Click "Exchange authorization code for tokens"
Grab the refresh token and use it like normal to generate auth tokens as needed.
Congratulations, you now have api access to the brand account!
Hope that helps.
The YouTube API is different then other google APIs. With other APIs you authenticate access to the full account. However with the YouTube API its channel based. You are going to need to authenticate your application once for each channel.
onBehalfOfContentOwner
This parameter is intended for YouTube content partners that own and
manage many different YouTube channels. It allows content owners to
authenticate once and get access to all their video and channel data,
without having to provide authentication credentials for each
individual channel. The actual CMS account that the user authenticates
with needs to be linked to the specified YouTube content owner.
You need to be a YouTube partner then you can contact your account manager and get a CMS id. I have yet to figure out what magic one must archive to become a YouTube partner.
I will give an update to #Paolo's incredible answer. In my case, I was trying to get my private videos using the Playlist.list api. I've never seen an api as poorly documented, asinine, and CONVOLUTED as youtube's api.
Context: I have a main google account for which my youtube api credentials are tied to (there is no google developer accounts for youtube brand accounts) but would like to get the private playlists (and videos) for my youtube account (a brand account). mine=true, key, channelId, onBehalfOfContentOwner, and onBehalfOfContentOwnerChannel all did NOTHING for me. I was getting either public playlists or api errors with various combinations and values of those parameters.
In the end, these were the steps I took to run a node script to get private videos from my brand account:
Go to https://console.developers.google.com/ for your main google account.
In the sidebar, go to APIs & Services, then Credentials
At the top, click +Create Credentials, then Service account
Under Service account details, enter any name, then click Create and Continue
Under "Grand this service account access to project", click continue
Under "Grant users access to this service account", click Done
On the main credentials page that loads, click the newly created service account under Service Accounts
In the tabs, click Keys
Click the Add Key button, then Create new key
Keep JSON, then click create
Save the file as client-key.json in the root of your nodejs project
Go to https://developers.google.com/oauthplayground
Scroll to bottom of scopes and select YouTube Data API v3 v3, then https://www.googleapis.com/auth/youtube and https://www.googleapis.com/auth/youtube.readonly.
In the window that pops up, click your youtube (brand) account, then allow
In the next step, click Exchange authorization code for tokens
Copy the access token
Go back to your node script and use like this:
const auth = new google.auth.GoogleAuth({
keyFile: "client-key.json",
scopes: [
"https://www.googleapis.com/auth/youtube",
"https://www.googleapis.com/auth/youtube.force-ssl",
"https://www.googleapis.com/auth/youtube.readonly",
"https://www.googleapis.com/auth/youtubepartner",
"https://www.googleapis.com/auth/youtubepartner-channel-audit",
],
})
const authClient = await auth.getClient()
google.options({ auth: authClient })
const youtube = google.youtube("v3")
const token = "your token here"
const results = await youtube.playlists.list({
part: [
"snippet",
"id",
"contentDetails",
"status",
"localizations",
"status",
],
mine: true,
auth: token,
oauth_token: token,
maxResults: 50,
})
Note mine: true and that the token must be passed to BOTH auth and oauth_token, but not key. If either parameter is missing, the call will fail. (Why? No clue. Please tell me.) Also, you must continuously renew your access token in the playground after it expires.
Now, with all of this said, I encourage you to find me an api worse than the youtube api. My guess is you'll be hard-pressed to find one even half as ridiculous as this.
P.S.
I believe there were additional things required before this such as enabling the youtube api and doing something on the OAUTH Consent Screen but I'm too exhausted with this thing to continue. Hopefully the Google console UX will be enough to guide you through those steps, though quite frankly, I doubt it.
Hope this helps and good luck, because you may actually need it.
If you follow the solution for getting a permanent refresh token and use Java, this works for me
GoogleCredential credential = new GoogleCredential.Builder().setTransport(httpTransport)
.setJsonFactory(JSON_FACTORY)
.setClientSecrets(oauth2ClientId, oauth2ClientSecret)
.build()
.setRefreshToken(oauth2RefreshToken);
this.youTubeClient = new YouTube.Builder(httpTransport, JSON_FACTORY, credential)
.setApplicationName(APPLICATION_NAME)
.build();
Required dependencies
<dependency>
<groupId>com.google.apis</groupId>
<artifactId>google-api-services-youtube</artifactId>
<version>v3-rev212-1.25.0</version>
</dependency>
<dependency>
<groupId>com.google.auth</groupId>
<artifactId>google-auth-library-oauth2-http</artifactId>
<version>0.18.0</version>
</dependency>
These resources might also help once you have the refresh token:
Authenticate programmatically to Google with OAuth2
https://blog.timekit.io/google-oauth-invalid-grant-nightmare-and-how-to-fix-it-9f4efaf1da35
I have created a web application that uses the Google+ Sign In API but have come across a problem with the automatic sign in behaviour.
I am not sure if I have implemented it correctly, here's the problem:
User signs into my application using their Google+ Sign In details.
Now they are signed into my app but also their Google account.
When they are finished, they sign out of my app, but remain signed into Google.
Now suppose a different user (using same machine/browser) visits my site, they are automatically signed in using the previous users details.
I understand that is bad practice and to avoid either a) signing the user out of their Google account when they leave my site or b) disabling the automatic behaviour of the Google+ Sign in.
So how can I prevent this behaviour?
After a user has authorized your application, the Google+ Sign-In button automatically tells your application who they are. If the user wants to use your site with with a different account, then they need to sign out of Google and sign in as a different user.
It sounds like you want the signed-in state between the user and your site to be different than the user's signed-in state with Google. In order to accomplish this you will need to manage your own session state. In other words, the button will always fire the JavaScript callback if the user has authorized your app. You, the developer, have the option of ignoring that information until the user has clicked the sign-in button. Some developers do this by attaching a click event handler to the button.
Refer to the answer in the below question. It is very similar to your scenario
Preventing automatic sign-in when using Google+ Sign-In
But even in that proposed solution the google+ account will still be logged in. Another step you could do is add a prompt asking the user to logout of the google+ account or you could call the google+ logout api ( did not check if there is one ) on behalf of the user.
I had this issue as well. You need to sign out of the gmail account as soon you get the email id from gmail auth:
<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
<script>
function onSuccessG(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
//now here write a code of login//
//
//now here write a code of login//
signOut();//call sign out function which will sign out user from their gmail accont
}
function onFailureG(error) {
console.log(error);
}
function renderButton() {
gapi.signin2.render('my-signin2', {
'scope': 'https://www.googleapis.com/auth/plus.login',
'width': 323,
'height': 35,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccessG,
'onfailure': onFailureG
});
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}