Oauth Google client-side authentication from a pop-up using javascript(coffeescript/jQuery) - ruby-on-rails-3

Im using oauth gem in my rails application.
gem 'omniauth-facebook', '1.4.0'
gem "omniauth-google-oauth2"
Facebook client-side authentication is working properly. I followed,
http://railscasts.com/episodes/360-facebook-authentication
Client-side authentication for google is not working or I couldn't get a handle of it.
I see this coffee script being responsible for facebook client side authentication,
jQuery ->
$('body').prepend('<div id="fb-root"></div>')
$.ajax
url: "#{window.location.protocol}//connect.facebook.net/en_US/all.js"
dataType: 'script'
cache: true
window.fbAsyncInit = ->
FB.init(appId: 145280228983243, cookie: true)
$('#sign_in').click (e) ->
e.preventDefault()
FB.login (response) ->
window.location = '/auth/facebook/callback' if response.authResponse
$('#sign_out').click (e) ->
FB.getLoginStatus (response) ->
FB.logout() if response.authResponse
true
What should i do for google client-side authentication?
I just want when a user clicks on "log in with google" a pop-up window
should appear and ask for user-id and password and before asking, it
should check whether the users information is already available on the
browser(client-side) and if available, dont prompt for the user-id and
password, go ahead and login.

I have the same problem and it seems that omniauth-google-oauth2 doesn't support client-side authentication this way as the facebook gem does.
The omniauth-facebook gem, when building access_token, checks if the signed request is present and if it's valid, then it uses access_token provided by request.params or cookie. Otherwise it queries access_token from Facebook with the provided authorization_code.
The omniauth-google-oauth2 gem does only the second operation and because redirect_uri must be same on the initial and on the verification request, you cannot use the gem's current version this way.
I have found one fork https://github.com/pivotal-geostellar/omniauth-google-oauth2/tree/client_login with the example http://pivotallabs.com/facebook-and-googleplus-javascript-sdk-sign-in-with-devise-ror/ but it's not secure to read access_token from request.params without validating it on the server-side.
update
I found a way to verify access_token by id_token and made a pull request to the gem https://github.com/zquestz/omniauth-google-oauth2/pull/50

Related

How do I get react-native-inappbrowser-reborn to trigger success upon successful Facebook login

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}" />

Can only get either a long access token or a refresh token

I am using react-native-auth0 sdk. Here is how I use auth0 to do facebook login.
auth0
.webAuth
.authorize({
scope: 'openid profile email offline_access',
//audience: config.auth0.audience, //option (1)
audience: auth0Domain+'/userinfo', //option (2)
responseType: 'token id_token',
})
.then(auth0Cred => {
console.log("Auth0 Auth Result: "+JSON.stringify(auth0Cred));
dispatch(signInAuth0Successful(auth0Cred));
if (callback != null) {
callback(auth0Cred);
}
dispatch(saveAuth0RefreshToken(auth0Cred.refreshToken));
//return auth0Cred;
})
.catch(error => console.log(error));
For the audience there are two options for me.
When I use option (1), it gives me (the long version of) accessToken, idToken, scope, expiresIn, tokenType.
When I use option (2), it gives me (the opaque version of) accessToken, idToken, refreshToken, expiresIn, tokenType.
However, I need both the long accessToken and refreshToken at the same time? Is it possible?
Explanation - When you use an audience for your own API, you are opting in to receive a JWT Access Token (long token). If you only need to call the Auth0 /userInfo endpoint then the default behaviour is only to offer an opaque access token - this is expected behaviour (if somewhat confusing).
Out of interest, why would you require a JWT Access Token if you are not specifying your own audience?
However, to try and solve your request - please check if you have set your Client in the Auth0 Dashboard to OIDC Conformant. Under Clients -> Your Client -> Settings - Advanced (at bottom of page). Screen shot below:
If this doesn't work we can explore other options - so please leave a comment beneath if required.
With OIDC Conformance, you would not receive a Refresh Token for a SPA (implicit flow). Instead, use Silent Auth - see reference docs here, so make sure you do have your Client Type set to Native.
Based on OP feedback - Check that the Resource Server also has allow_offline_access enabled. Can patch this with Management API. Alternatively, just go to your API in the Auth0 Dashboard and toggle the switch on the API settings page.

How to obtain a LinkedIn token via Titanium

I want to log in to my application via LinkedIn. This can be done via a call to Cloud.SocialIntegrations.externalAccountLogin() .
However, the function above needs a 'token' parameter. The 'token' is provided by LinkedIn by following the oauth flow(retrieve an authorization code, exchange of the Authorization Code for a Request Token).
Is there an easy way in titanium to obtain this token? I have investigated aaronksaunders's(https://github.com/aaronksaunders/clearlyinnovative.linkedIn) code, and searched on gitt.io. Or do we need to write all of this boilerplate code ourselves?
NOTE: At the moment, I don't want to proxy the call via a server(I prefer not to set up an SSL certificate, etc) and I don't have an appcelerator team or enterprise plan, so I can't use their node(arrow) backend to proxy these calls.
Additional question: is it sufficient to configure the iOS Bundle Identifiers(on the LinkedIn app settings page)? And do I need to use this 'iOS settings' application Id(also on the LinkedIn app settings page)?
I have successfully finished my flow. Everything is explained in this blog post from Ramkumar M: http://shareourideas.com/2012/12/18/linkedin-connect-for-appcelerator-titanium/. The result is achieved by using a modified commonjs module version of the social.js library: https://gist.github.com/rampicos/4320296
This library has a very clean api, the whole flow is nothing more than:
var social = require('social');
var linkedin = social.create({
consumerSecret : CONSUMER_SECRET,
consumerKey : CONSUMER_KEY,
site: 'linkedin'
});
linkedin.authorize(function(){
//callback
});
I don't use the
Cloud.SocialIntegrations.externalAccountLogin()
because the login is done by the social.js library.
LinkedIn app: I have only configured the iOS bundle identifiers.

Can I auto login a user on the client that has already been authorized on the server?

I have an application that uses google's oauth system to authorize with youtube's api. The code for this is done on our server and we receive tokens without any problem. We'd like to move some of the api calls to the client using their javascript api.
Since we've already authorized the user with the correct scopes required for the youtube api (https://www.googleapis.com/auth/youtube) I assumed when I called authorize on the client it would know that my application was already authorized and allow auto login. Instead I receive a "immediate_failed" response. Does anyone know why? Thanks!
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: true
}, handleAuthResult);
If you have the token, you can just use setToken instead of going through OAuth2 again.

How to get the "oauth access secret" for a connection to the soundcloud api

I am new to using APIs of Websites. But since a long time I wanted to learn this and today started with the simple example of how to access information from soundcloud. Here is the code of the simple example from their website
require 'rubygems'
gem 'soundcloud-ruby-api-wrapper'
require 'soundcloud'
gem 'oauth'
require 'oauth'
# Create a Soundcloud OAuth consumer token object
sc_consumer = Soundcloud.consumer('YOUR_APPLICATION_CONSUMER_TOKEN','YOUR_APPLICATION_CONSUMER_SECRET')
# Create an OAuth access token object
access_token = OAuth::AccessToken.new(sc_consumer, 'YOUR_OAUTH_ACCESS_TOKEN', 'YOUR_OAUTH_ACCESS_SECRET')
# Create an authenticated Soundcloud client, based on the access token
sc_client = Soundcloud.register({:access_token => access_token})
# Get the logged in user
my_user = sc_client.User.find_me
# Display his full name
p "Hello, my name is #{my_user.full_name}"
I know what to set as:
'YOUR_APPLICATION_CONSUMER_TOKEN'
'YOUR_APPLICATION_CONSUMER_SECRET'
as this was given when registering a application on soundcloud.
I set the 'YOUR_OAUTH_ACCESS_TOKEN' to http://api.soundcloud.com/oauth/access_token
which was also written on the soundcloud site, but I have no idea where to get the
_YOUR_OAUTH_ACCESS_SECRET_ from.
Is this access secret also a random string that I get from somewhere, do I have to generate it by myself.
EDIT As suggested in the answer of the Elite Gentlemen I also tried the Soundcloud example on authentication. I post here the piece of code which already leads to the error:
require 'rubygems'
gem 'soundcloud-ruby-api-wrapper'
require 'soundcloud'
# oAuth setup code:
# Enter your consumer key and consumer secret values here:
#consumer_application = {:key => 'QrhxUWqgIswl8a9ESYw', :secret => 'tqsUGUD3PscK17G2KCQ4lRzilA2K5L5q2BFjArJzmjc'}
# Enter the path to your audio file here.
path_to_audio_file = "your/absolute/path/to/audio_file.ext"
# Set up an oAuth consumer.
#consumer = OAuth::Consumer.new #consumer_application[:key], #consumer_application[:secret],
{
:site => 'http://api.sandbox-soundcloud.com',
:request_token_path => '/oauth/request_token',
:access_token_path => '/oauth/access_token',
:authorize_path => '/oauth/authorize'
}
# Obtain an oAuth request token
puts "Get request token"
request_token = #consumer.get_request_token
The error message I receive then is:
OAuth::Unauthorized: 401 Unauthorized
method token_request in consumer.rb at
line 217 method get_request_token in
consumer.rb at line 139 at top
level in test1.rb at line 25
How can this simple example fail?
The answer to the question is very simple. My problem was that I had
registered my application on the soundcloud production system
soundcloud.com but directed my requests against sandbox-soundcloud.com.
I had to go to sandbox-soundcloud.com, register a new user account and make a
new client application and everything worked perfectly.
More information on the Sandbox is available here:
http://github.com/soundcloud/api/wiki/Appendix-B-Sandbox
As with OAuth, you will have to register your application with Soundcloud if you want the end-user to access Soundcloud's protected resources through your application.
When you request an access_token from Soundcloud using OAuth, it will return you and access_token and a oauth_token_secret. That oauth_token_secret is what you mentioned as YOUR_OAUTH_ACCESS_SECRET
I don't know how familiar you are with OAuth. The documentation can be found here.
Edit OAuth authorization scheme changed a while back, (e.g. getting an access token requires you to specify a oauth_verifier).
See the SoundCloud example on Authentication using the latest OAuth specification.