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

Add your App/website name and click on Create



In the Credentials API Popup, select the create credentials drop-down list, and choose OAuth client ID.




Select Application Type As Web Application or iOS, android and click on configure button


Fill personal details, privacy details and click on save

Get the package name from your AndroidManifest.xml file then use the following command to get the fingerprint and Click on Create

8. From the resulting OAuth client dialog box, copy the Client ID. The Client ID lets your app access enabled Google APIs.

Configure Facebook OAuth:

Register New OAuth application follow below steps



Navigate to https://developers.facebook.com and login with your facebook Account credentials when prompted.

Click on “ My Apps” Dropdown and select “Add a New App”.



Select a App Platform ( iOS,Android,Facebook Canvas,WebSite,etc)
Give Unique App/Website Name


Fill email, select app category and click on “Create APP ID”.
Complete security check and click on Submit
Get the package name from your AndroidManifest.xml file then add package name and class name



Generate development key hash and press on Finish
From the resulting OAuth client dialog box, copy the Client ID. The Client ID lets your app access enabled Facebook APIs.

Configure Twitter OAuth:

Register New OAuth application follow below steps
Navigate to https://dev.twitter.com/apps/new and login with your Twitter Account credentials when prompted.
Enter your Application Name, Description ,your website address and callback URL.

Accept the Developer agrement and clicking the Create your Twitter Application.
Copy the consumer key (API key) and consumer secret from the screenand use into your application

Configure Microsoft OAuth:

Go to https://apps.dev.microsoft.com/, and login with your Microsoft Account (Hotmail, Windows Live, Messenger, Active Directory, Xbox, Skype, and OneDrive) credentials when prompted.
Select My Application and click Add an App
Enter the Application name and click on Create application



Generate application ID and secrets and use into the application

Configure LinkedIn OAuth:

Register New OAuth application follow below steps
Navigate to http://developer.linkedin.com/ and login with your LinkedIn Account credentials when prompted
Select platform (RESTAPI,Javascript ,Android SDK,iOS SDK)
Click the "Add New Application" link and fill in the required fields(Company Name,Application Name,Description,Application URL,logo,Business website,email and phone) and agree Licience condition



4. Click on Submit. To retrieve your API Key and Secret Key later, click on the link for your Application Name and they will now be listed in the application's details.

Configure Githup OAuth:

Register New OAuth application follow below steps
Navigate to https://github.com/settings/developers and login with your Github Account credentials when prompted.
Click the "Register New App" link and fill in the required fields(Application Name,Description, URL and callback url) and click on”Regsiter Application “

Copy the Client ID and Client Secret from the screen and use into your application

Configure Dropbox OAuth

Navigate to https://www.dropbox.com/developers and login with your DropBox Account credentials when prompted.
Choose an API Type and Access type
Enter the Application name and click on Create App



Copy the App Key and App Secret from the screen and use into your application

Configure Flicker OAuth:

Navigate to https://developer.yahoo.com/flickr/ and login with your Yahoo Account credentials when prompted.
For getting API Key ,Clcik on “ Create an APP”.

Choose if Non-Commercial or Commercial.
Enter the Application name, description and click on submit


Copy the App Key and App Secret from the screen and use into your application

Configure Yahoo OAuth:

Register New OAuth application follow below steps
Navigate to https://developer.yahoo.com/apps/ and login with your Yahoo Account credentials when prompted.
Enter the Application name, application type and access and click on Create App







Copy the Client ID and Client Secret from the screen and use into your application



I will explain about implementation on Next article

You can add new platform projects to the Xamarin.Forms solution.

In the Add New Project dialog, you can create Xamarin.iOS project by selecting the iOS project Universal type and Blank App template.

Create a Xamarin.Android project with the Android Blank App template, or a Windows project by selecting Universal under the Windows heading (for a UWP project), or Windows or Windows Phone under the Windows 8 heading, and then Blank App.

Android 4.0.3 (API 15) or higher

iOS 6.1 or higher

Windows Phone 8.1

Windows 8.1

Windows 10 Universal Apps

Windows Phone 8 Silverlight

How to create First Xamarin.Form Application?

Step 1:

Open Visual Studio ( Run ➔ Devenv.exe)

My system having following VS version with xamarin

Step 2:

Create New Project ( File ➔ New ➔ Project )

Step 3:

Open New Project template Cross Platform ➔ Blank App(Xamarin .Forms .Portable)



*** Solution and project name is DevXamarinForms

Visual Studio automatically creates following projects,

DevXamarinForms.Android, DevXamarinForms.iOS, DevXamarinForms.UWP, etc and a shared Portable Class Library (PCL) project named called DevXamarinForms (Refer below)

After create project solution should be like below

Step 4:

Right Click on Portable Project (DevXamarinForms) ➔ Add ➔ New Item ➔Cross-Platform ➔ Forms Xaml Page and name it HomePage.CS



After that two new file are created under portable library HomePage.XAML and HomePage.XAML.cs

In HomePage.XAMl , the below code will automatically added into xaml page


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DevXamarinForms.HomePage">
<Entry x:Name="txtresult" Text="welcome Devenvexe.com" /> <!--Add this TextBox-->
</ContentPage>

The xml two name space (xmls) are added into xaml page and refered xamarin and micrsoft url with version.

The HomePage.xaml.cs code-behind file looks like this.

using Xamarin.Forms;
namespace DevXamarinForms
{
public partial class HomePage : ContentPage
{
public HomePage()
{
InitializeComponent();
}
}
}

Where Can find InitializeComponent() Method :

InitializeComponent() method will generate during build so build your portable library , C# code file is generated from the XAML file. If you look in the \DevXamarinForms\DevXamarinForms\obj\Debug directory, you’ll find a file named DevXamarinForms.HomePage.xaml.g.cs. The ‘g’ stands for generated.



namespace DevXamarinForm {
using System;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

public partial class HomePage : global::Xamarin.Forms.ContentPage {
[System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build.
Tasks.XamlG", "0.0.0.0")]
private global::Xamarin.Forms.Entry txtresult;
[System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build.
Tasks.XamlG", "0.0.0.0")]

private void InitializeComponent() {
this.LoadFromXaml(typeof(HomePage));
txtresult = this.FindByName<global::Xamarin.Forms.Entry>("txtresult");
}
}
}

Just Modify App.CS file, like below

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Xamarin.Forms;
namespace DevXamarinForm
{
public class App : Application
{
public App()
{
// The root page of your application
//MainPage = new ContentPage
//{
// Content = new StackLayout
// {
// VerticalOptions = LayoutOptions.Center,
// Children = {
// new Label {
// HorizontalTextAlignment = TextAlignment.Center,
// Text = "Welcome to Xamarin Forms!"
// }
// }
// }
//};
MainPage = new HomePage(); // Add this code
}
}
}

Build and Run Application:

Model Name: User

Namespace :HelloApp.Model

namespace HelloApp.Model
{
public class User
{
public string UName;
}
}

Step 3: Adapter

Create adapter class and derived from BaseAdapter .

BaseAdapter is abstract class. we need implement following methods. We need select Row template and

namespace HelloApp.Adapters
{
class UserAdapters : BaseAdapter<User>
{
List<User> userlist;
Activity useractivity;
public UserAdapters(Activity context ,List<User> item):base()
{
useractivity = context;
userlist = item;
}
public override User this[int position]
{
get
{
throw new NotImplementedException();
}
}
public override int Count
{
get
{
return userlist.Count;
}
}
public override long GetItemId(int position)
{
return position;
}

public override View GetView(int position, View convertView, ViewGroup parent)
{
var item = userlist[position];
if(convertView == null)
{
convertView = useractivity.LayoutInflater.Inflate(Android.Resource.Layout
SimpleExpandableListItem1,null);
}
convertView.FindViewById<TextView>(Android.Resource.Id.Text1).Text = item.uname;
return convertView;
}
}
}

Step 4: Activity

HelloApp (ProjectName) (Right Click) è Add New Item è Select ( Activity) è Click Add

Source Code :

namespace HelloApp
{
[Activity(Label = "ListDemoActivity" , MainLauncher = true)]
public class ListDemoActivity : Activity
{
private ListView UserListView;
private List<User> userlist;
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
base.SetContentView(Resource.Layout.ListDemo);
UserListView = FindViewById<ListView>(Resource.Id.UserList);
userlist = new List<User>();
userlist.Add(new User { UName = "Sutahahr" });
userlist.Add(new User { UName = "Suresh" });
userlist.Add(new User { UName = "Sumathi" });
userlist.Add(new User { UName = "Sujatha" });
UserListView.Adapter = new UserAdapters(this, userlist);
}
}
}

Source code explanation:

1. [Activity(Label = "ListDemoActivity (Title Of Text)" , MainLauncher = true(Initial launcher))]

2. private ListView UserListView – Find Control and assign to local variable

3. private List<User> userlist; - Assign Collection value

4. base.SetContentView(Resource.Layout.ListDemo); - Assign layout content in activity

5. UserListView = FindViewById<ListView>(Resource.Id.UserList); - Find user control from layout page

6. userlist = new List<User>(); - add collection

7. UserListView.Adapter = new UserAdapters(this, userlist); - Assign user collection into adapters

Step 4:

Now you can develop mobile cross application. Free Licensing will allow only one machine at a time.If you want to use different machine, you want to disable previous machine licensing like below

Step 4.1:

Login to Xamarin.com

Step 4.2:

Go to https://store.xamarin.com/account/my/subscription/computers

Step 4.3:

Click on Deactivate and Enable different machine .

Great news for Microsoft developer . Developers don’t need to buy a $3,000 HoloLens device. Microsoft Visual Studio team will be releasing a HoloLens emulator that can be used to build and test apps. The preview of HoloLens emulator will look below

Step 4.1:

Login to Xamarin.com

Step 4.2:

Go to https://store.xamarin.com/account/my/subscription/computers

Step 4.3:

Click on Deactivate and Enable different machine .