Visit the free getting started tutorials on nativescript.org for JavaScript, Angular, or Vue.js.
Kindly note that we filter out plugins that:
package.json
$ tns plugin add nativescript-oauth-cp
Library for interacting with OAuth 2.0 in NativeScript applications that provides simplified client access with a OAuth providers that support the OAuth 2.0 protocol such as Microsoft Live accounts, Microsoft Graph, Office 365, Facebook, Cloud Foundry UAA instances, LinkedIn, and Google (Google is a work in progress due to some of their restrictions).
UPDATE: This plugin is deprecated and is now replaced by the new nativescript-oauth2 plugin
Tested against Microsoft Live, Office 365, Microsoft Graph API, Facebook, LinkedIn and private instances of UAA.
For logging in with your Office 365 account, you should have an Office 365 Account admin account. If you don't have one yet, you can get a free trial here.
Watch a video tutorial for setting up the NativeScript OAuth plugin and registering you app with Microsoft.
Register your mobile app here. This will require you to login with your Office 365 account. You can then click the big "Add an app" button and go through the steps listed there, starting with giving you app a name. On the app creation screen, you need to do 3 things:
For logging in with your Facebook account, you should have a Facebook developer account. If you don't have one yet, you can get one here.
Keep an eye out on my YouTube channel for a video on how to set up Facebook with with plugin.
Register your mobile app by following the wizard under "My Apps" -> "Add a new app".
For logging in with your LinkedIn account, you should have a LinkedIn developer account. If you don't have one yet, you can get one here.
My Apps
Create Application
submit
Authorized Redirect URL
You will need to have a Cloud Foundry account to deploy your instance of UAA.
For more information, please refer to https://github.com/cloudfoundry/uaa
Add TypeScript to your NativeScript project if you don't already have it added. While this is not a requirement, it's highly recommended. If you want to watch a video on how to convert your existing JavaScript based NativeScript app to TypeScript, watch it here.
From the command prompt go to your app's root folder and execute:
npm install nativescript-oauth --save
If you want a quickstart, you can start with one of two demo apps:
We need to do some wiring when your app starts. If you are not using Angular, open app.ts and add the following code before application.start();
app.ts
application.start();
If you are using Angular, then open your main.ts file and add the following code before platformNativeScriptDynamic().bootstrapModule(AppModule);
main.ts
platformNativeScriptDynamic().bootstrapModule(AppModule);
import * as tnsOAuthModule from "nativescript-oauth";
var o365InitOptions: tnsOAuthModule.ITnsOAuthOptionsOffice365 = { clientId: "e392f6aa-da5c-434d-a42d-a0e0a27d3955", //client id for application (GUID) scope: ["Files.ReadWrite", "offline_access"] //whatever other scopes you need }; tnsOAuthModule.initOffice365(o365InitOptions);
var facebookInitOptions: tnsOAuthModule.ITnsOAuthOptionsFacebook = { clientId: "1119818654921555", clientSecret: "bbb58f212b51e4d555bed857171c9aaa", scope: ["email"] //whatever other scopes you need }; tnsOAuthModule.initFacebook(facebookInitOptions);
var uaaInitOptions: tnsOAuthModule.ITnsOAuthOptionsUaa = { authority: "https://my-uaa-instance.com", redirectUri: "myAppDomain://authcallback", clientId: "my-client-id", clientSecret: "my-client-secret", scope: ["uaa.resource", "uaa.user"], cookieDomains: ["myAppDomain://"], basicAuthHeader: "Basic XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" }; tnsOAuthModule.initUaa(uaaInitOptions);
var linkedInInitOptions: tnsOAuthModule.ITnsOAuthOptionsLinkedIn = { clientId: "", clientSecret: "", scope: ["r_basicprofile"] //Leave blank and the default scopes will be used }; tnsOAuthModule.initLinkedIn(linkedInInitOptions);
The custom provider is intended for advanced users. It directly exposes the OAuth credentials. You can use this to connect with your own private identity server or other providers.
var myInitOptions : tnsOAuthModule.ITnsOAuthCredentials = { authority: 'https://my.identity-server', authorizeEndpoint: '/my/authorize/endpoint' tokenEndpoint: '/my/token/endpoint', clientId: 'myClientId', clientSecret: 'my-client-secret, redirectUri: 'myAppDomain://callback', responseType: 'my tokens', scope: 'my requested scopes', }; tnsOAuthModule.initCustom({ credentials: myInitOptions, cookieDomains: [ 'my.identity-server', ... ], });
In your view controller or component (or wherever you will have a handler to respond to the login user action) you will reference the nativescript-oauth module again and call the login function.
nativescript-oauth
login
import * as tnsOAuthModule from 'nativescript-oauth'; ... tnsOAuthModule.login() .then(()=>{ console.log('logged in'); console.dir("accessToken " + tnsOAuthModule.accessToken()); }) .catch((er)=>{ //do something with the error });
When you make API calls you can use the ensureValidToken function, which will also ask you to authenticate, if the token is expired.
ensureValidToken
tnsOAuthModule .ensureValidToken() .then((token: string) => { console.log("token: " + token); }) .catch(er => { //do something with the error });
npm install
tsc
/demo/package.json
"nativescript-oauth" : "../"
demo
Popularity metric based on:
Quality metric based on:
Maintenance metric based on: