Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Monday, September 5, 2016

OAuth Login Authenticating with Identity Provider in Xamarin.Forms

Introduction:
download-source-code_btn1.png
OAuth is an Authorization framework that enable application to obtain limited access to user accounts on HTTP service in Facebook, google and Microsoft etc. Nowadays no need to create registration logic alternatively you can choose to use identity provider login. In this case a person signs up for the app using identity provider Login, an account is created for them, and the authentication step is taken care of by identity provider.
In this article I will explain how to implement below oAuth identity provider in xamarin Forms and manage the authentication process in a xamarin Forms application
  1. GOOGLE
  2. FACEBOOK
  3. TWITTER
  4. MICROSOFT
  5. LINKEDIN
  6. GITHUB
  7. FLICKER
  8. YAHOO
  9. DROPBOX


Register Mobile App with Identity Provider:
You can find my previous article for register mobile app with identity provider from here
Step 1: Create New Xamarin.Forms Project:
Let Start create new Xamarin Forms Project in Visual studio
Open Run Type Devenev.Exe and enter New Project (Ctrl+Shift+N) select Blank Xamarin.Forms Portable template


It will automatically create multiple project like Portable, Android, iOS, UWP but Here, I will be targeting only Android, as iOS and UWP implementation is similar.


Step 2: Install OAuth Client Components
Xamarin.Auth is a cross-platform SDK for authenticating users and storing their accounts. It includes OAuth authenticators that provide support for consuming identity providers.
Let's add the Xamarin.Auth component for OAuth. We will have to add this in all platform specific projects separately.
Go to Any project (DevEnVExeLogin.Droid) Components Right Click Get More Components
If you are not login already, it will show login page.
Next, Search and double-click on Xamarin.Auth component and click on Add to App

Step 3: Create Base Login Page (LoginPage.Xaml)
I have created quick and simple login screen .You can modify as per your requirement
Right Click Portable Class Library Add New Item Select Xaml Page(Login Page)
LoginPage.Xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:DevEnvExeLogin"
            x:Class="DevEnvExeLogin.LoginPage">
 <StackLayout>
   <Entry Placeholder="Username" />
   <Entry IsPassword="true" Placeholder="Password" />
   <Button Text="Login"  HeightRequest="50"  />
  <Button Text="Google"  Clicked="LoginClick" Image="GOOGLE.png" HeightRequest="50"/>
   <Button Text="FaceBook"  Clicked="LoginClick" Image="FACEBOOK.png" HeightRequest="50"/>
   <Button Text="Twitter"  Clicked="LoginClick" Image="TWITTER.png" HeightRequest="50"/>
   <Button Text="Github" Clicked="LoginClick" Image="GITHUB.png" HeightRequest="50"/>
   <Button Text="Yahoo"  Clicked="LoginClick" Image="YAHOO.png" HeightRequest="50"/>
   <Button Text="DropBox"  Clicked="LoginClick" Image="DROPBOX.png" HeightRequest="50"/>
   <Button Text="LinkedIn"  Clicked="LoginClick" Image="LINKEDIN.png" HeightRequest="50"/>
  <Button Text="Flicker"  Clicked="LoginClick" Image="FLICKER.png" HeightRequest="40"/>
  <Button Text="Twitter"  Clicked="LoginClick" Image="MICROSOFT.png" HeightRequest="40"/>
 </StackLayout>
</ContentPage>


LoginPage.Xaml.CS
Add LoginClick event in login page code behind file and sender object will return button text name (eg:Facebook,Twitter..etc)
using System;
using Xamarin.Forms;

namespace DevEnvExeLogin
{
   public partial class LoginPage : ContentPage
   {
       public LoginPage()
       {
           InitializeComponent();
       }
       void LoginClick(object sender, EventArgs args)
       {
           Button btncontrol = (Button)sender;
           string providername = btncontrol.Text;
           if (OAuthConfig.User == null)
           {
               Navigation.PushModalAsync(new ProviderLoginPage(providername));
               //Need to create ProviderLoginPage so follow Step 4 and Step 5
           }
       }

   }
}


Step 4: Create Identity Provider Login Page
As we will be having platform specific LoginPage implementation of Xamarin.Auth, we don't need any specific implementation in the portable project.
We do need to add an empty ProviderLoginPage which will be resolved at runtime and substituted by actual implementation regarding this will explain on step 5
Right Click Portable Project Add New Item Select Xaml page (ProviderLoginPage.Xaml )
using Xamarin.Forms;

namespace DevEnvExeLogin
{
   public partial class ProviderLoginPage : ContentPage
   {
       //we will refer providename from renderer page
       public string  ProviderName { get; set; }
       public ProviderLoginPage(string _providername)
       {
           InitializeComponent();
           ProviderName = _providername;
       }
   }
}


** In Xaml page no Changes
Step 5: Create Platform Specific Login Renderer:
We need to create platform specific LoginRenderer Page so you can create platform specific Login page (loginRenderer.CS) to iOS, Android and UWP project.
We need to add LoginPageRenderer which will be used by Xamarin.Auth to display web view for OAuth Login Page
Code Snippet Explanation:
The below code is Xamarin.Forms DependencyService which maps ProviderLoginPage to LoginRenderer.

[assembly: ExportRenderer(typeof(ProviderLoginPage), typeof(LoginRenderer))]


Get Identity ProviderName from Providerloginpage
           var loginPage = Element as ProviderLoginPage;
           string providername = loginPage.ProviderName;


Create OauthProviderSetting class from Portable Class Library with Oauth Implementation, regarding this I have explained in Step 6.
//Create OauthProviderSetting class with Oauth Implementation .Refer Step 6
               OAuthProviderSetting oauth = new OAuthProviderSetting();
               var auth = oauth.LoginWithProvider(providername);


Create Oauth event for provider login completed and canceled.
auth.Completed += (sender, eventArgs) =>
               {
                   if (eventArgs.IsAuthenticated)
                   { //Login Success   }
                   else
                   {
                       // The user cancelled
                   }
               };


If you want get and save user info. You can create UserEntity from Portable library and refer below code
namespace DevEnvExeLogin
{
   public class UserDetails
   {
       public string TwitterId { get; set; }
       public string Name { get; set; }
       public string ScreenName { get; set; }
       public string Token { get; set; }
       public string TokenSecret { get; set; }
       public bool IsAuthenticated
       {
           get
           {
               return !string.IsNullOrWhiteSpace(Token);
           }
       }
   }
}

LoginRenderer.CS
using Android.App;
using Xamarin.Forms.Platform.Android;
using DevEnvExeLogin;
using Xamarin.Forms;
using DevEnvExeLogin.Droid.PageRender;

[assembly: ExportRenderer(typeof(ProviderLoginPage), typeof(LoginRenderer))]
namespace DevEnvExeLogin.Droid.PageRender
{
   public class LoginRenderer : PageRenderer
   {
       bool showLogin = true;
       protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
       {
           base.OnElementChanged(e);
           
           //Get and Assign ProviderName from ProviderLoginPage
           var loginPage = Element as ProviderLoginPage;
           string providername = loginPage.ProviderName;

           var activity = this.Context as Activity;
           if (showLogin && OAuthConfig.User == null)
           {
               showLogin = false;
              
               //Create OauthProviderSetting class with Oauth Implementation .Refer Step 6
               OAuthProviderSetting oauth = new OAuthProviderSetting();
               var auth = oauth.LoginWithProvider(providername);

               // After facebook,google and all identity provider login completed
               auth.Completed += (sender, eventArgs) =>
               {
                   if (eventArgs.IsAuthenticated)
                   {
                       OAuthConfig.User = new UserDetails();
                       // Get and Save User Details
                       OAuthConfig.User.Token = eventArgs.Account.Properties["oauth_token"];
                       OAuthConfig.User.TokenSecret = eventArgs.Account.Properties["oauth_token_secret"];
                       OAuthConfig.User.TwitterId = eventArgs.Account.Properties["user_id"];
                       OAuthConfig.User.ScreenName = eventArgs.Account.Properties["screen_name"];

                       OAuthConfig.SuccessfulLoginAction.Invoke();
                   }
                   else
                   {
                       // The user cancelled
                   }
               };

               activity.StartActivity(auth.GetUI(activity));
           }
       }
   }
}

Step 7: OAuth Implementation
The OAuth2Authenticator class is responsible for managing the user interface and communicating with authentication services. It will support all the identity provider
But In Twitter Oauth Authentication will support only on OAuth1Authenticator so you can use OAuth1Authenticator instead of OAuth2Authenticator.
The OAuth2Authenticator and OAuth1Authenticator class requires a number of parameters, as shown in the following list
  • Client ID – Identity provider client ID, while register app you will unique client ID.

  • Client Secret –identifies the client that is making the request. while register app you will unique client secret

  • Scope – this identifies the API access being requested by the application, and the value informs the consent screen
  • that is shown to the user. For more information about scopes,

  • Authorize URL – this identifies the URL where the authorization code will be obtained from.

  • Redirect URL – this identifies the URL where the response will be sent. The value of this parameter must match
  • one of the values that appears in the Credentials page for the project.

  • AccessToken Url — this identifies the URL used to request access tokens after an authorization code is obtained.
Step 7.1: Access GOOGLE Account:
var googleauth = new OAuth2Authenticator(
                                    // For Google login, for configure refer http://jsdotnetsupport.blogspot.in/2016/08/register-identity-provider-for-new.html
                                    "ClientId",
                                   "ClientSecret",
                                    // Below values do not need changing
                                    "https://www.googleapis.com/auth/userinfo.email",
                                    new Uri("https://accounts.google.com/o/oauth2/auth"),
                                    new Uri("http://www.devenvexe.com"),// Set this property to the location the user will be redirected too after successfully authenticating
                                    new Uri("https://accounts.google.com/o/oauth2/token")
                                    );


Step 7.2: Access FACEBOOK Account:
 var OauthFacebook = new OAuth2Authenticator(
                clientId: "MyAppId",  // For Facebook login, for configure refer http://jsdotnetsupport.blogspot.in/2016/08/register-identity-provider-for-new.html
                scope: "",
                authorizeUrl: new Uri("https://m.facebook.com/dialog/oauth/"), // These values do not need changing
                redirectUrl: new Uri("http://www.facebook.com/connect/login_success.html")// These values do not need changing
            );


Step 7.3: Access TWITTER Account:
OAuth1Authenticator auth = new OAuth1Authenticator(
                       consumerKey: "*****",    // For Twitter login, for configure refer http://jsdotnetsupport.blogspot.in/2016/08/register-identity-provider-for-new.html
                       consumerSecret: "****",  // For Twitter login, for configure refer http://jsdotnetsupport.blogspot.in/2016/08/register-identity-provider-for-new.html
                       requestTokenUrl: new Uri("https://api.twitter.com/oauth/request_token"), // These values do not need changing
                       authorizeUrl: new Uri("https://api.twitter.com/oauth/authorize"), // These values do not need changing
                       accessTokenUrl: new Uri("https://api.twitter.com/oauth/access_token"), // These values do not need changing
                       callbackUrl: new Uri("http://www.devenvexe.com")    // Set this property to the location the user will be redirected too after successfully authenticating


Step 7.4 Access Microsoft Account:
var OauthMicrosoft = new OAuth2Authenticator(
                         clientId: "MY ID", // For Micrsoft login, for configure refer http://jsdotnetsupport.blogspot.in/2016/08/register-identity-provider-for-new.html
                         scope: "bingads.manage",
                         authorizeUrl: new Uri("https://login.live.com/oauth20_authorize.srf?client_id=myid&scope=bingads.manage&response_type=token&redirect_uri=https://login.live.com/oauth20_desktop.srf"),
                         redirectUrl: new Uri("https://adult-wicareerpathways-dev.azurewebsites.net/Account/ExternalLoginCallback")
                         );


Step 7.5 Access LINKEDIN Account:
  var authLinkediN = new OAuth2Authenticator(
            clientId: "**",// For LinkedIN login, for configure refer http://jsdotnetsupport.blogspot.in/2016/08/register-identity-provider-for-new.html
            clientSecret: "**",
            scope: "",
            authorizeUrl: new Uri("https://www.linkedin.com/uas/oauth2/authorization"),
            redirectUrl: new Uri("http://devenvexe.com/"),
            accessTokenUrl: new Uri("https://www.linkedin.com/uas/oauth2/accessToken")


Step 7.6 Access GITHUB Account:
auth = new OAuth2Authenticator(
                               // For GITHUB login, for configure refer http://jsdotnetsupport.blogspot.in/2016/08/register-identity-provider-for-new.html
                               "ClientId",
                              "ClientSecret",
                               // Below values do not need changing
                               "",
                               new Uri("https://github.com/login/oauth/authorize"),
                               new Uri("http://www.devenvexe.com"),// Set this property to the location the user will be redirected too after successfully authenticating
                               new Uri("https://github.com/login/oauth/access_token")
                               );


Step 7.7 Access FLICKER Account:
  auth = new OAuth2Authenticator(
                               // For Flicker login, for configure refer http://jsdotnetsupport.blogspot.in/2016/08/register-identity-provider-for-new.html
                               "ClientId",
                              "ClientSecret",
                               // Below values do not need changing
                               "",
                               new Uri("https://www.flickr.com/services/oauth/request_token"),
                               new Uri("http://www.devenvexe.com"),// Set this property to the location the user will be redirected too after successfully authenticating
                               new Uri("http://www.flickr.com/services/oauth/access_token")
                               );


Step 7.8 Access YAHOO Account:
auth = new OAuth2Authenticator(
                               // For Yahoo login, for configure refer http://jsdotnetsupport.blogspot.in/2016/08/register-identity-provider-for-new.html
                               "ClientId",
                              "ClientSecret",
                               // Below values do not need changing
                               "",
                               new Uri("https://api.login.yahoo.com/oauth2/request_auth"),
                               new Uri("http://www.devenvexe.com"),// Set this property to the location the user will be redirected too after successfully authenticating
                               new Uri("https://api.login.yahoo.com/oauth2/get_token")
                               );
You can download source and replace client ID or AppID and Client secret

C:\Users\Suthahar\Pictures\twitter.PNGC:\Users\Suthahar\Pictures\twitterresult.PNG