Our account linking from Google Actions to Auth0 works. We use the Authorization Code flow with https://xxx.auth0.com/authorize?xxx. We now need to release the Google Action in multiple languages. During a user's initial account linking process, how do we make Auth0 display the sign in screen in the right language based on the locale setting on the user's phone?
The fix for us is to set the language in the Auth0 Universal Login template.
var language = 'en';
if (navigator && navigator.language && navigator.language.length > 1) {
language = navigator.language.substr(0, 2);
// you may need better language validation here.
// why substr? auth0 doesn't like en-US and we don't need pt-*, zh-*.
// See auth0 language list https://auth0.com/docs/universal-login/i18n
}
var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
language:language,
// other fields...
}
lock.show();
Related
I have the Webchat (from the Microsoft Bot Framework) running embedded in another application that uses a browser under the hood.
When trying to add Authentication to the bot, I realized that the OAuthCard's Sign-in button doesn't work because is trying to open a blank window (about:blank) that is used to redirect the user to the login page of the identity provider. In the embedded context, the OS doesn't know how to handle the about:blank call. See the image below.
I'm following this example, that it is actually working on the browser:
Add authentication to a bot
Bot authentication example
I want to know if there is a way to change the behavior of the "Sign In" button of the OAuthCard to just open the sign-in URI directly without using the about:blank and redirect technique.
I was able to make it work after finding out that was possible to change the button type of the OAuthCard from "signin" to "openUrl" before the Webchat does the rendering.
There seems to exist a similar issue with Microsoft Teams. Here where I found the clue:
https://github.com/microsoft/botframework-sdk/issues/4768
According to the Webchat reference, it is possible to intersect and change the activities:
https://github.com/microsoft/BotFramework-WebChat/blob/master/docs/API.md#web-chat-api-reference
Here is the solution, that is more like a hack. I hope this would be configurable in the future:
// Change the button type in the OAuthCard to the type of OpenUrl
const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => action => {
if (action.type == "DIRECT_LINE/QUEUE_INCOMING_ACTIVITY" &&
action.payload.activity.hasOwnProperty("attachments") &&
action.payload.activity.attachments[0].contentType === "application/vnd.microsoft.card.oauth") {
action.payload.activity.attachments[0].content.buttons[0].type = "openUrl";
}
return next( action );
});
// Pass the store to the webchat
window.WebChat.renderWebChat({
...,
store
});
At my current project, we are using Auth0 as our Identity Provider. The current architecture is just a ReactJS app supported by a couple of APIs. Each API requires different combinations of Authorization Scopes, but basically they will require Customer Role, Provider Role or any authenticated user.
We were using Username-Password-Authentication so far and now we are integrating Social logins (such as Facebook, Google and Apple).
In order to achieve so, we are using Authorization Code flow, so the BE constructs the Authorize URL (including Callback URL, scopes, etc) that the FE then uses. After the user has authenticated against the Social Provider, the Callback URL is called, we exchange the code for an access_token that is ultimately returned to the FE. So far so good.
https://{domain}.auth0.com/authorize?
response_type=code&
client_id={clientId}&
audience={audience}&
connection=facebook&
state={ramdom_value}&
redirect_uri={callbackUrl}&
scope=offline_access openid scope:customer
And here is where some issues arise.
Firstly, after exchanging the Authentication Code for an access_token, the token does not include the scopes in it, so the user cannot access the APIs. I had to create a custom rule that adds the Customer role, like this:
function (user, context, callback) {
var count = context.stats && context.stats.loginsCount ? context.stats.loginsCount : 0;
if (count > 1 || (context.connection !== 'facebook' && context.connection !== 'google-oauth2' && context.connection !== 'apple')) {
return callback(null, user, context);
}
var ManagementClient = require('auth0#2.17.0').ManagementClient;
var management = new ManagementClient({
token: auth0.accessToken,
domain: auth0.domain
});
management.assignRolestoUser(
{ id : user.user_id},
{ "roles" :["rol_Msm9ykmstuK09r9s"]},
function (err) {
if (err) {
callback(err);
} else {
callback(null, user, context);
}
}
);
}
I don't really understand why I need to create the rule in order to get a valid access_token.
Secondly, there are two possible roles for users, Customers and Providers. For now, we are only allowing customers to use Social Logins, but eventually we will need to support also Providers. There is no way for us to detect what kind of user is actually logging in within that rule.
So my question here would be how to solve it.
My final goal is to allow users (both Customers and Providers) to log in using Social Connections and have each of them with the roles they really require. Of course, I need to get a valid access_token so that users can then interact with our APIs.
Any thoughts or comments? What am I missing?
I came up with an elegant solution after all.
The approach I took was:
Create a Custom Rule that assigns both roles (Customer and Provider) only and only if:
1.1. This is the first login for this user
1.2. The connection type is either facebook or google-oauth2 or apple
When creating the URL for login, include only the scopes required based on the user role required. In addition, the callback url will include the user role in it, e.g. https://server/{platform}/callback/{role}
In the callback endpoint, remove the roles that are not required using the Auth0 Management API /api/v2/users/{id}/roles
This solution is a bit tricky, but works with relatively small coding and effort.
I'm using the Google Login iOS SDK to login, then passing GIDGoogleUser.authentication.idToken to the server, which I'm then verifying in Node JS. The verification in the code below works fine. "payload" var ends up being correct with basic information about the user.
How do I translate the idToken into credentials that I can use to git the people.get endpoint? (I want to know whether the user is using the default Google profile photo or not, and that is available from the people.get endpoint.) This does not seem to be documented anywhere.
https://developers.google.com/people/api/rest/v1/people/get
var auth = new GoogleAuth;
var client = new auth.OAuth2(GoogleUtils.clientIDs, '', '');
client.verifyIdToken(
token,
GoogleUtils.clientIDs,
// Or, if multiple clients access the backend:
//[CLIENT_ID_1, CLIENT_ID_2, CLIENT_ID_3],
function(e, login) {
if (e) {
return next(e, null);
}
var payload = login.getPayload();
return next(null, payload);
});
Thanks for your help. I can't seem to find any of this info in the documentation. Google's APIs are very poorly documented it seems.
Unfortunately, as noted, the current ID token payload does not say whether the photo is the default one (probably something we should add). If you need an access token to call Google's REST APIs (such as people.get) for more user data, then you need to obtain an OAuth auth code, and exchange it for access and refresh tokens, as documented at https://developers.google.com/identity/sign-in/ios/offline-access
I am having trouble clearing the last login when using social providers.
Currently using Lock with the following options:
var options = {
rememberLastLogin: false,
auth: {
sso: false,
redirect: false
}
};
var lock = new Auth0Lock('clientID', 'account.auth0.com', options);
The issue is that when executing the next steps it always logins with the same account:
Call lock.show
Select social login provider (Google)
Attempt login with account A [non authorized account]
Lock shows "You are not allowed to access this application." [expected result]
Click Google button again and it still tries to log into the same account A (Lock does not offer a way to try different login from same social provider)
Close Lock and reopen it
Click Google button and it still uses same login account A (no option to enter new account)
What can I do to be able to select a different account?
When you use a social login provider the automatic sign-in is handled by the provider in question. Disabling the sso option and rememberLastLogin will mean Auth0 will not try to login you automatically or provide any information about who login for the last time.
When you login with Google the first time, Google created a session and next requests will automatically use that session by default.
However, Google supports an option that will allow you to choose the behavior you want, in this case it seems you want for the user to be able to select another account, which can be accomplished by passing the following option prompt=select_account (see other options here) in the Google login request.
You can achieve this in Auth0 Lock by providing this option in the auth.params object. Updated example below:
var options = {
rememberLastLogin: false,
auth: {
sso: false,
redirect: false,
params: { prompt: 'select_account' }
}
};
var lock = new Auth0Lock('clientId', '[tenant].auth0.com', options);
Or if you use Auth0.WebAuth then you need to pass param to authorization call:
auth0Instance.web.authorize({
prompt: 'select_account'
})
On a MVC 5 web site I would like visitors to be able to read the full version of a post only after they shared it on Facebook or Twitter.
I have seen this example in a few web sites ... What would be the best way to do this?
There is no real security issues here ... It is just a way to spread the word ...
My first idea would be to save a cookie with a post KEY (Guid) ... This key is not visible to the user so he will not know the value.
The problem is how do I know that he shared the url ... How do I get the confirmation?
Thank You,
Miguel
You get confirmation as follows, per the Facebook Developers Docs:
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},
function(response) {
if (response && response.post_id) {
alert('Post was shared.'); //give access to article
} else {
alert('Post was not shared.'); //they chose not share... don't give access
}
});
I implemented this code almost verbatim in a .NET project (just replaced the alerts with my own functionality) where I gave users two entries into a contest if they shared the contest page (instead of one entry if they didn't share or did nothing).
As for Twitter, I've personally not implemented something similar, but your best bet is probably JavaScript Interfaces for Twitter for Websites.
I don't know about Facebook, but with Twitter a retweet is the same as a share. The statuses/retweeters/ids should work. If you have the id of the tweet, then you can hold a list of who retweeted it, updating as needed to get new ids.
https://dev.twitter.com/docs/api/1.1/get/statuses/retweeters/ids
If you don't want to write all of the code to authenticate and configure the endpoint, you could use a 3rd party library. Here's an example from my library, LINQ to Twitter v3.0 Beta:
ulong tweetID = 210591841312190464;
var status =
await
(from tweet in twitterCtx.Status
where tweet.Type == StatusType.Retweeters &&
tweet.ID == tweetID
select tweet)
.SingleOrDefaultAsync();
if (status != null && status.User != null)
status.Users.ForEach(
userID => Console.WriteLine("User ID: " + userID));
BTW, there's also a Facebook SDK for .NET.