When Google One Tap is implemented using Javascript API/HTML API including nonce, the returned JWT is missing nonce for Safari browser. Chrome and Fireforx returns the nonce as expected.
Please refer the code used.
const initializeGSI = () => {
google.accounts.id.initialize({
client_id: '132-xxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
cancel_on_tap_outside: false,
nonce: '7342364',
callback: onOneTapSignedIn
});
Browser Version
Safari Version 16.1 (18614.2.9.1.12)
Steps
Integrate Google One Tap using Javascript API/HTML API using a nonce.
Sign in via Google One Tap in Safari
Check retuned JWT
Using "itp_support" did not make any change on this.
This behaviour remains same for both Javascript API and HTML API.
When "Prevent cross-site tracking" is disabled at Safari, the nonce returns and works as expected. Safari has this default setting. Any workaround available other than changing the Safari's default behavior?
Related
I'm trying to setup a manual flow for Facebook login, as per the docs at: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/
I've got my test Facebook app working as expected, i.e., I can login using a private web browser window fine. The URL I'm using is:
https://facebook.com/v3.3/dialog/oauth?client_id=<app_id>&display=popup&response_type=token&redirect_uri=https://www.facebook.com/connect/login_success.html
Now within my React-Native app, I'm using react-native-inappbrowser-reborn to present a SFAuthenticationSession on iOS. As per their docs (at https://www.npmjs.com/package/react-native-inappbrowser-reborn), I'm doing the following:
const redirectUri = "https://www.facebook.com/connect/login_success.html"
const url = "https://facebook.com/v3.3/dialog/oauth?client_id="+appId+"&display=popup&response_type=token&redirect_uri=https://www.facebook.com/connect/login_success.html"
InAppBrowser.isAvailable()
.then(() => {
InAppBrowser.openAuth(url, redirectUri, {
// iOS Properties
dismissButtonStyle: 'cancel',
// Android Properties
showTitle: false,
enableUrlBarHiding: true,
enableDefaultShare: true,
})
.then((response) => {
// Only gets to this point if user explicitly cancels.
// So this does not trigger upon successful login.
})
// catch handlers follow
Using the above, my app correctly open up an in-app browser and I can login fine using a test user for my test app. Upon successful login though, I don't get redirected back to the .then completion handler. It just stays in the in-app browser view and I see the same message from Facebook that I see when logging in using a web browser. It says something like "Success. Please treat the url the same as you would a password", or something like that.
I may be missing something here, but I thought the purpose of passing redirectUri as an argument to openAuth was so that upon redirection to that URI, the completion handler would be triggered.
Question: How do I redirect back to the completion handler upon login success?
I think that you already have a solution but thought it might be useful for someone else facing this issue. If you don't have a solution so far follow my instructions:
You can't directly redirect back to your application using deep link, since Facebook will not call a link `like myapplicationname://mycustompath´. It's only possible to call links using the https-protocol (https://...).
The solution I'd suggest you to use is to redirect using your own API (Facebook -> Your API -> Deep Link Redirection). You will understand why this is required in the most of the real world applications at the end of the instructions.
Starting from your react-native app call the authorize endpoint of Facebook with a redirection to your application and set the global deeplink of your app as redirect uri.
InAppBrowser.close();
InAppBrowser.openAuth("https://graph.facebook.com/oauth/authorize?client_id=YOURCLIENTID&redirect_uri=https://YOURDOMAIN:PORT/auth/facebook", "{YOURAPPSDEEPLINKNAME}://{SOMEPATHYOUWANTTOEND}")
.then((response) => {
handleAuthorized(response, LOGINTYPE.FACEBOOK);
});
Now after login you'll be redirected to your API with the authorization code token as query parameter (e.g. https://YOURDOMAIN:PORT/auth/facebook?code=AVERYLONGCODESENTBYFACEBOOK)
Using this code token from the query parameter, you make another API Call to get the access_token for the user
{GET}: https://graph.facebook.com/v15.0/oauth/access_token?client_id=YOUR_CLIENT_ID&redirect_uri=https://YOURDOMAIN:PORT/auth/facebook&client_secret=YOUR_CLIENT_SECRET&code=AVERYLONGCODESENTBYFACEBOOK
Facebook's API will send you an answer as JSON with the access_token inside.
You can make another call using the access token of the user, to get the userId and the username
{GET}: https://graph.facebook.com/me?access_token=ACCESS_TOKEN_SENT_BY_FACEBOOK_IN_PREVIOUS_GET_REQUEST.
If you need the e-mail address for the user you have to make another call. Make sure you'd set the permission to read the e-mail address for your app on the developer portal of facebook.
The following request will return you the id, name and the email of the user
{GET}: https://graph.facebook.com/USERIDFROMPREVIOUSREQUEST?fields=id,name,email&access_token=ACCESSTOKEN
I think you want to save all these information to a database and create a session in order to keep the user logged in and therefore all the requests described will be useful for you in a real application.
After doing all the backend stuff, you're ready for the redirection using deep link. To do that, set a meta-tag to redirect the inappbrowser to your application:
<meta http-equiv="refresh" content="0; URL={YOURAPPSDEEPLINKNAME}://{SOMEPATHYOUWANTTOEND}" />
I have django rest framework based app, where i am using session based authentication. All apis need session authentication to return results otherwise it will give 403.
App has login flow where user login and session is set under cookie and all apis authenticated after that.
Now i am building chrome extension for same app where i need to make one of the rest api call. since user is already logged in browser so i am assuming that i can make the api call from chrome extension. but when i make the api call from chrome extension its returning 403. I am using fetch to perform request.
I am new in developing chrome extension so i am not able to figure out how to authenticate api call from chrome extension since user is already logged in browser.
I tried ajax request and fetch request and also set the permission in manifest.json.
fetch(url, {
credentials: 'include'
})
I want to pass authentication token(JWT) in puppeteer headers, for the pdf view with headless chrome in my application?
We are using react as our front-end UI. And using puppeteer we are able to generate pdf, but the link to pdf we need to authorize using JWT
How do we pass the jwt in headers, does puppeteer support Auth token in headers?
Please help.
Thanks
To pass additional headers in the request, you can use the function page.setExtraHTTPHeaders.
Quote from the docs linked above:
The extra HTTP headers will be sent with every request the page initiates.
Example:
page.setExtraHTTPHeaders({
'Token': '...',
});
All following requests will then have the additional header Token with the set value.
When using the Postman Chrome App with the Interceptor extension it's easy to reuse the browser's cookies in order to log into an app and then call the services within.
Since moving to the Postman standalone app, this process has become somewhat manual. After logging in from the browser, I have to access the JSESSIONID cookie in the developer tools and copy its value over to postman.
When my session expires I need to repeat the process.
I would like to automate this synchronization or at least understand how I could obtain the new authenticated value in postman. It's important to note that none of the authentication mechanisms available in Postman work with my app which is why the manual login in the browser is necessary.
You can get JSESSIONID cookie in Postman Standalone in similar way your browser do it - by send proper requests (probably POST "login" request with user credentials) to server
I have a Facebook Connect site under development. The login works great on Firefox, IE, Safari and Chrome. But when I test it using Opera (using the latest version = 11) I run into problems.
I get to the point where I get the login form pop-up, fill it in with my email and password and click the login button. After that the login window becomes empty and the window title says "XD Proxy".
I am using the Facebook Connect JavaScript SDK and there are some iFrames (displayed in the jQuery lightbox-style plugin "ColorBox") in my solution.
Do you know if there are problems with Opera and Facebook Connect, or if there's something in my code that causes this? As I said, the solution has been tested in all the other major browsers and work fine there.
Thanks in advance!
/Thomas
PS. On the development server I'm running the site on port number 8585. I've seen some posts on the net saying this can cause problems.
Facebook connect currently fails because Facebook's scripts "detect" Internet Explorer by checking if the attachEvent method is supported. Unfortunately, Opera supports this method (historically for compatibility with other sites that needed it). Now, if they only did this: https://github.com/facebook/connect-js/pull/240 ..
This broken pseudo-browser-detection causes the problem because Facebook happens to use some IE code that Opera does not support to embed Flash for cross-document messaging in the Flash-based part of the script, while the alternate window.postMessage() part of the script has other problems as described here: http://my.opera.com/hallvors/blog/2010/07/20/postmessage-s-targetorigin-and-security
I have found a solution that seems to work! If I add a channelUrl option to FB.init, I can log in. I got a warning from Opera saying the following:
Warning
http://www.yourdomain.com/channel.html?fb_xd_fragment
A page on the public Internet requests
data from your private intranet. For
security reasons, automatic access is
blocked, but you may choose to
continue.
LINK: Continue
LINK: Always continue when data is
requested from this server on my
private intranet
I clicked the link "Continue" and after that it worked (during this session). The original FB.init line looked like this (appId and some other stuff has been replaced in this example):
// Facebook init
FB.init({ appId: '123456789', status: true, cookie: true, xfbml: true });
After I had added the channelUrl it looked like this:
// Facebook init
FB.init({ appId: '123456789', status: true, cookie: true, xfbml: true, channelUrl: "http://www.yourdomain.com/channel.html" });
The file "channel.html" is a simple file that contains just this line of code:
<script src="http://connect.facebook.net/en_EN/all.js"></script>
Create it and put it on your server at the location you have specified in the channelUrl. The server root is a good place.
The next step is figuring out how to get rid of the Opera warning, if it's possible at all?
Good luck!
/Thomas Kahn
To fix it in Opera, just add the following after FB.init():
if($.browser.opera ) // it uses jQuery library here!
{
FB.XD._transport="postmessage";
FB.XD.PostMessage.init();
}
This channel.html dont work for me
<script src="http://connect.facebook.net/en_EN/all.js"></script>
but when I change it to:
<script src="http://connect.facebook.net/en_GB/all.js"></script>
it works. In this url is not valid content http://connect.facebook.net/en_EN/all.js there is something wr go to this instead http://connect.facebook.net/en_GB/all.js