Why?
Many sites like Facebook, Google, Meetup etc have APIs to allow third party applications perform actions on behalf of users.This integration provides powerful features and better user experience. Imagine ability to share a thought originally posted in your application to be shared on Facebook and Twitter automatically. Or comment on a meetup event from your mobile app.OAuth allows third party apps securely access website or application on behalf of the user. User doesn't share user id password to third party application. Rather will authenticate with the original application. User will be prompted for set of features to authorize. If user authorizes successfully, the third party application could perform actions on behalf of the user.
What?
In this blog, let's take a mobile app developed using Phone Gap authenticating with Meetup site. If user authenticates and authorizes the app, will access secure Meetup API on behalf of the user. Let's use C# for server side code. It could be a Web Site deployed on Cloud like Azure or a server within your premises.In this blog we follow Server workflow where app authenticates with the website once. Unless user goes to Meetup site and resets access, app can continue to use the access provided. App is expected to securely store tokens on the server.
Note:
Meetup OAuth allows user with an implicit flow where a third party app can authenticate user with Meetup site and use the resultant code to perform actions on behalf of the user. This is simple to use and App is not expected to store anything. The code will expire after a limited period of time. After that application need to authenticate again. Assuming the application is a web app in a browser, user is already logged into Meetup site on the machine, he/she won't see log-in prompt again. If not the user will get the login repeated.
This blog doesn't use this workflow, rather uses a more elaborate server workflow that doesn't involve user again as much as possible.
This blog doesn't use this workflow, rather uses a more elaborate server workflow that doesn't involve user again as much as possible.
Following depicts server flow
Let's go through above steps
Get access to use Meetup API (one-time)
To present Meetup login screen launch following Meetup URL. As mentioned above with OAuth user directly authenticates with the original site. No credentials are provided to the third party app.
'https://secure.meetup.com/oauth2/authorize?client_id=YOUR Key&response_type=code&redirect_uri=http://localhost/my_app'
|
App needs to register with Meetup at this link. Client Id in above URL is a key. This is how meetup identifies the third party apps.
In the same page you need to specify a redirect Url, once authenticated successfully Meetup redirects to this Url. In the example it's http://localhost/my_app. When redirected Meetup responds back with User Token in query string.
In Phone Gap this could be achieved using InAppBrowser plugin. Install In App Browser with the following command
cordova plugin add org.apache.cordova.inappbrowser
In the Phone Gap app launch a new window (that uses InAppBrowser) to present Meetup login screen to the user.
var windowReferece = window.open('https://secure.meetup.com/oauth2/authorize?client_id=YOUR_Key&response_type=code&redirect_uri=http://localhost/my_app', '_blank', 'location=yes')
// As callback Url starts to load, handle the returned Url to get user token
windowReferece.addEventListener("loadstart",function(event){
if(event && event.url){
var replyUrl = event.url;
// extract token out of the Url
var token = replyUrl.substring(replyUrl.indexOf("code=")+5);
if(token.indexOf("&") >= 0){
token = token.substring(0,token.indexOf("&"));
}
console.log(token);
}
});
Send given token to your API server, that handles rest of authentication and makes secure Meetup API calls. In this sample, I'm using C# server side code to further authenticate and get access tokens for secure meetup API calls.
Consider following code to get Access Token using User Token generated in the Phone Gap app,
#region Create Request to get access token
// Client Id and secret are generated while registering with Meetup earlier at this link
var requestContent =
"client_id=Your client id&" + //
"client_secret=your client secret&" +
"grant_type=authorization_code&" +
"redirect_uri=http://localhost/my_app&" +
"code=" + [[ user key obtained from Phone Gap app ]];
WebRequest request = null;
try
{
// Meetup OAuth API that gets access token
request = WebRequest.Create("https://secure.meetup.com/oauth2/access");
var requestBytes = Encoding.UTF8.GetBytes(requestContent);
request.ContentType = "application/x-www-form-urlencoded";
request.Method = "POST";
request.ContentLength = requestBytes.Length;
var requestStream = request.GetRequestStream();
requestStream.Write(requestBytes, 0, requestBytes.Length);
requestStream.Close();
}
catch (Exception exception)
{
Logger.LogError(exception);
return string.Empty;
}
#endregion Create Request to get access token
#region Make calls and handle response
try
{
var response = request.GetResponse();
var statusCode = ((HttpWebResponse)response).StatusCode;
// Add checks based on status code.
var responseStream = new StreamReader(response.GetResponseStream());
// Response includes Access Token and Refresh Token. Store them (may be in DB) for Meetup API calls to use
return responseStream.ReadToEnd();
}
catch (Exception exception)
{
Logger.LogError("Error while reading response obtained from OAUTH call. ", exception);
return string.Empty;
}
#endregion Make calls and handle response
request = WebRequest.Create("https://api.meetup.com/2/member/self/");
// OAuth Access Token is passed along in request headers
request.Headers.Add("Authorization", "Bearer " + ACCESS_TOKEN_OBTAINED_ABOVE);
request.Method = "GET";
var response = request.GetResponse();
var statusCode = ((HttpWebResponse)response).StatusCode;
var responseStream = new StreamReader(response.GetResponseStream());
var data = responseStream.ReadToEnd();
Remember, this access token is valid for 60 minutes only. After that request for access token again. Does that mean user need to be involved again? No. Use refresh token obtained in the first server side call to request for access token now on.
Following will be the request content to Meetup OAuth URL with refresh token
var requestContent = "client_id=your client id&" +
"client_secret=your client secret&" +
"grant_type=refresh_token&" +
"refresh_token=" + refreshToken;
That's it. Let's build some cool apps that integrate with Meetup.
For further reading and reference:
Meetup OAuth documentation
Phone Gap - Getting Started
What's Phone Gap - A basic explanation
Another way to do it - PhoneGap Plugin for OAuth
AngularJS Way - ng-cordova-oauth
Consider following code to get Access Token using User Token generated in the Phone Gap app,
#region Create Request to get access token
// Client Id and secret are generated while registering with Meetup earlier at this link
"client_id=Your client id&" + //
"client_secret=your client secret&" +
"grant_type=authorization_code&" +
"redirect_uri=http://localhost/my_app&" +
"code=" + [[ user key obtained from Phone Gap app ]];
WebRequest request = null;
try
{
// Meetup OAuth API that gets access token
request = WebRequest.Create("https://secure.meetup.com/oauth2/access");
var requestBytes = Encoding.UTF8.GetBytes(requestContent);
request.ContentType = "application/x-www-form-urlencoded";
request.Method = "POST";
request.ContentLength = requestBytes.Length;
var requestStream = request.GetRequestStream();
requestStream.Write(requestBytes, 0, requestBytes.Length);
requestStream.Close();
}
catch (Exception exception)
{
Logger.LogError(exception);
return string.Empty;
}
#endregion Create Request to get access token
#region Make calls and handle response
try
{
var response = request.GetResponse();
var statusCode = ((HttpWebResponse)response).StatusCode;
// Add checks based on status code.
var responseStream = new StreamReader(response.GetResponseStream());
// Response includes Access Token and Refresh Token. Store them (may be in DB) for Meetup API calls to use
}
catch (Exception exception)
{
Logger.LogError("Error while reading response obtained from OAUTH call. ", exception);
return string.Empty;
}
#endregion Make calls and handle response
Make Secure Meetup API calls
Above call returns Access Token, which could be used with any Meetup API that needs authentication. Consider following coderequest = WebRequest.Create("https://api.meetup.com/2/member/self/");
// OAuth Access Token is passed along in request headers
request.Headers.Add("Authorization", "Bearer " + ACCESS_TOKEN_OBTAINED_ABOVE);
request.Method = "GET";
var response = request.GetResponse();
var statusCode = ((HttpWebResponse)response).StatusCode;
var responseStream = new StreamReader(response.GetResponseStream());
var data = responseStream.ReadToEnd();
Remember, this access token is valid for 60 minutes only. After that request for access token again. Does that mean user need to be involved again? No. Use refresh token obtained in the first server side call to request for access token now on.
Following will be the request content to Meetup OAuth URL with refresh token
var requestContent = "client_id=your client id&" +
"client_secret=your client secret&" +
"grant_type=refresh_token&" +
"refresh_token=" + refreshToken;
That's it. Let's build some cool apps that integrate with Meetup.
For further reading and reference:
Meetup OAuth documentation
Phone Gap - Getting Started
What's Phone Gap - A basic explanation
Another way to do it - PhoneGap Plugin for OAuth
AngularJS Way - ng-cordova-oauth
