Develop Reference

Google Oauth popup cancellation callback

When using Google Identity Services (GSI) I can display a popup to ask users to connect with their Google account.
This is pretty well documented and it works well with this code:
const client = window.google.accounts.oauth2.initCodeClient({
client_id: 'CLIENT_ID',
scope: 'SCOPE',
ux_mode: 'popup',
callback: async (response) => {
console.log('Response Google', response);
},
});
client.requestCode();
However, I wish to do something if the user close the popup. I can't find anything in the documentation and in examples online. I tried intermediate_iframe_close_callback and native_callback, but neither are called when closing the popup.
So, is it possible ? How can I do it ?
Thanks

I think the callback name is "error_callback". You can find details at: Handle Errors
const client = google.accounts.oauth2.initCodeClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
ux_mode: 'popup',
callback: myCallback,
error_callback: myErrorCallback // You can do something when popup window closed
});

It appears that this is not working for the current version of GSI.
It did work for the old gapi version and if the popup were to be closed you would get a response with the error: {error: "popup_closed_by_user"}. As referenced in this answer: Google SSO login error: "popup_closed_by_user"
Hopefully adding the #google-oauth tag will allow someone at Google to see this and hopefully update this script.

How can I test that the user can link OAuth providers using Cypress?

I'm working on a project in which a user can log in using whether a phone number, using Google, or using Github. I use Firebase for authentication. I'm currently adding integration tests using Cypress. My problem is I can't properly test that the user can link or unlink a provider. To link a provider I use linkWithRedirect() firebase method.
At first, I tried to just simulate a button click. But this didn't work because Cypress doesn't allow visiting multiple domains in one test.
My next attempt was to use linkWithCredential() method. I get cookies and the provider's auth URL from the developer tools to get authorization code and use this code to get access token.
My Cypress command to get Google token:
Cypress.Commands.add(
'getGoogleToken',
() => {
cy.request({
url: Cypress.env("GOOGLE_AUTH_URL"),
headers: {
cookie: Cypress.env("GOOGLE_AUTH_COOKIE")
},
followRedirect: false
})
.its("redirectedToUrl")
.then(redirectedToUrl => {
const url = new URL(redirectedToUrl);
const code = url.searchParams.get("code");
cy.request({
url: "https://www.googleapis.com/oauth2/v4/token",
method: "POST",
form: true,
body: {
code,
redirect_uri: Cypress.env("GOOGLE_REDIRECT_URI"),
client_id: Cypress.env("GOOGLE_CLIENT_ID"),
client_secret: Cypress.env("GOOGLE_CLIENT_SECRET"),
grant_type: "authorization_code"
}
})
.its("body")
.then(body => body.access_token);
});
});
Using this token I call my own linkWithGoogleWithToken method which calls linkWithCredential method:
Cypress.Commands.add(
'linkWithGoogle',
() => {
cy.getGoogleToken()
.then(token => {
cy.get("#auth")
.invoke("linkWithGoogleWithToken", token);
});
});
In my tests, I call several functions to link one provider, then link another provider, then unlink provider, and so on. Sometimes this command works as expected, but sometimes it remains in the pending state forever. I can't find why. Searching doesn't help, it seems like no one has encountered this problem.
So, I am looking for ways to link OAuth provider programmatically, not using UI. I'm considering Firebase Admin SDK, but I can't find the way to link providers in its documentation. I would appreciate any help from anyone who was encountering this issue.

I found out why I was having this problem. The point is that after visiting the page, I add an alias to refer to my firebase functions:
Cypress.Commands.add(
'init',
() => {
cy.visit("/");
cy.window()
.its("firebase")
.its("auth").as("auth");
cy.nullifyUsername();
});
The first time when I called the invoke method, everything worked fine. Then I reloaded the page because I need to update the page with this information.
cy.linkGoogle();
cy.reload();
cy.get("#googleButton")
.contains(/^unlink$/i);
And after that, the next time I tried to link another provider the invoke method remained in the pending state. That happened because after reloading the page, my alias was referred to a function that was no longer exists. My solution is to add alias after reloading the page. So, I created custom command for this:
Cypress.Commands.add(
'refresh',
() => {
cy.reload();
cy.window()
.its("firebase")
.its("auth").as("auth");
});

Login using facebook get username, email

I am using login using facebook in my website,
Here is the button
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
I am using the exact example given here
But after the check login status, i am getting the response with only the userid of facebook and token, but i want to get the username too.. How can i get that ?
Help pls
Here is the script
window.fbAsyncInit = function () {
FB.init({
appId: 'xxxx',
cookie: true, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.2' // use version 2.2
});
FB.getLoginStatus(function (response) {
console.log(response);
console.log(response.email);
//here status is connected
//statusChangeCallback(response);
});
};
In the resopnse, i am getting the entire json,
In the response.status i am getting as connected
But while i try response.email i am getting undefined
How can i get the email or username ?

EDITED to show what actually fixed it for me:
So it does appear to depend on what version of the API your config is set to allow. BUT, I was able to get the email address on a v2.5 api by using the following:
If you are using the Hello World code, then replace this section:
FB.api('/me', function (response) {
console.log('Success ');
console.log(response);
});
With this:
FB.api('/me', { fields: 'email' }, function (response) {
console.log('Success ');
console.log(response);
});
The difference is adding the { fields: 'email' } object to the call. This appears to have been a new addition in either v2.4 or v2.5 of the API which is why older code you see on SO appears to work for the poster but not for you. Hope this helps.
I'm not sure this qualifies as a solution, but I was able to reproduce this issue (no email returned after a valid request).
I have two apps, each created under a different FB account. The first one was created more than a year ago and the second one was created today. I have code that runs perfectly against the older app (returns email) and fails against the newer app (no email).
At first I thought maybe FB just holds back on certain data for brand new apps but I thought it was odd that it wouldnt be documented anywhere.
So I decided to compare each app configuration side by side. I found that the older one had API VERSION (at the top of the dashboard) set to 2.0 and the newer was 2.5. The Hello World code on the API SDK page requests version 2.2 like so:
window.fbAsyncInit = function () {
FB.init({
appId: [my app id here],
cookie: true, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.2'
})
};
According to the documentation, the fact that the newer app has API set to 2.5 in the config means that any requests for an older API (eg 2.2) will be automatically upgraded to 2.5. When I set the javascript above to request 2.5 (eg version: 'v2.5'), I was able to get the older app to fail too. So I suspect the issue is with the newer v2.5 api.
I have not been able to find out how to set my new app to accept older api calls but will update here if I do.

Do I need to pass access tokens when using the Javascript SDK?

I'm just getting started with the Graph API and the Javascript SDK. I have a page that will authenticate users using the fb:login-button, and I have successfully posted on status updates using /me/feed. However, when I try to retrieve a list of Events, or Posts the response is an empty array. I've cut and pasted some of the examples from FB docs, and they result in undefined objects.
Am I missing something on authentication? My users are authorizing user_events and friend_events. I figured if I could post, I should be able to read. Hoping it is something obvious.
Here is code sample that always results in the error case:
function getFriends() {
FB.api('/me/friends', function(response) {
if(response.data) {
$.each(response.data,function(index,friend) {
alert(friend.name + ' has id:' + friend.id);
});
} else {
alert("Error!");
}
});
and my login-button and init code:
<fb:login-button autologoutlink="true" perms="status_update,publish_stream,user_events,friends_events"></fb:login-button>
<script language="javascript" type="text/javascript">
FB.init({
appId: 'myappid',
status: true,
cookie: true,
xfbml: true
});
Thanks in advance.

no you don't have to pass access_token .... maybe it is just a copy paste typo, but you miss a closing bracket in your code

Facebook login button with oauth 2 not calling auth.login

Our Asp.net site has been using the facebook login button (w/ javascript sdk) to handle the login process, and now that Oauth is mandatory (as of Dec 15, 2011 (yesterday))- it is broken. I've made some obvious changes that were mentioned the fb oauth migration blog, but still I'm getting errors. Specifically, when FB.init()'s parameter sets status=false, the auth.login event is never fired (which is a problem, because I use callback on that event to invoke another page which does some server-side open graph queries based on the authorization token in the resulting cookie). If I set status=true, then the event is fired, but the cookie is not set, and so I'm unable to make my server-side open graph queries.
Here's my javascript code (slightly edited...):
window.fbAsyncInit = function () {
FB.init({
appId: GetFacebookAppId(),
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function (response) {
if (response.authResponse && response.authResponse.accessToken)
FacebookLoginRedirect();
});
}
Any ideas?
Thanks!

Try FB.getLoginStatus() instead of if (response.authResponse && response.authResponse.accessToken)
See detaild example here in the docs : ]

Hopefully someone finds this useful- I was able to listen to a different event: auth.statusChange, check the response, and then proceed. One thing was that I had to unsubscribe to this event once I had successfully logged in, but then it seemed to work ok.

listen to auth.statusChange :
FB.Event.subscribe('auth.statusChange', handleStatusChange);