@klippa/nativescript-login v3.1.1

nativescript-login

:rocket: The best way to do social logins in NativeScript :rocket:

A plugin with modern SDKs to allow authentication to various providers with access to all SDK features.

Features

• Facebook Login
• Google Sign In
• Sign In with Apple (iOS only)
• Access to all Login SDK features

NativeScript Version Support

Installation (NS 8)

ns plugin add @klippa/nativescript-login@^3.0.0

Usage

Facebook Login

Android integration

• Follow the 1. Select an App or Create a New App step in the manual
• Edit/create your App_Resources/Android/src/main/res/values/strings.xml file and add the following, replace the {{app-id}}, {{app-name}}, {{client-token}} values:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- If your strings.xml already existed, add the following <string> elements -->
    <string name="app_name">{{app-name}}</string>
    <string name="title_activity_kimera">{{app-name}}</string>
    <string name="facebook_app_id">{{app-id}}</string>
    <string name="fb_login_protocol_scheme">fb{{app-id}}</string>
    <string name="facebook_client_token">{{client-token}}</string>
</resources>

• Edit your App_Resources/Android/src/main/AndroidManifest.xml and add the following inside the <application> element.

<meta-data android:name="com.facebook.sdk.ApplicationId" 
        android:value="@string/facebook_app_id"/>

<activity android:name="com.facebook.FacebookActivity"
          android:configChanges=
                  "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
          android:label="@string/app_name" />
<activity
android:name="com.facebook.CustomTabActivity"
android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="@string/fb_login_protocol_scheme" />
    </intent-filter>
</activity>

• Follow the 6. Provide the Development and Release Key Hashes for Your App step in the manual
• Logging in with your Facebook account should now work! The SDK takes care of the rest.

iOS integration

• Follow the 1. Select an App or Create a New App step in the manual
• Enter your Bundle Identifier at the step 3. Register and Configure Your App with Facebook -> 3a. Add your Bundle Identifier ** Open App_Resources/iOS/Info.plist and add the following, replace {{APP_ID}} with your own app ID, {{CLIENT_TOKEN}} with your client token and {{APP_NAME}} with your app name:

  <key>CFBundleURLTypes</key>
  <array>
  	<!-- If you already have a CFBundleURLTypes key, only add the dict section to the array -->
  	<dict>
  		<key>CFBundleTypeRole</key>
         <string>Editor</string>
         <key>CFBundleURLSchemes</key>
         <array>
             <string>fb{{APP_ID}}</string>
         </array>
     </dict>
  </array>
  <key>FacebookAppID</key>
  <string>{{APP_ID}}</string>
  <key>FacebookClientToken</key>
  <string>{{CLIENT_TOKEN}}</string>
  <key>FacebookDisplayName</key>
  <string>{{APP_NAME}}</string>
  <key>LSApplicationQueriesSchemes</key>
  <array>
     <!-- If you already have a LSApplicationQueriesSchemes key, only add the strings to the array -->
     <string>fbapi</string>
     <string>fbapi20130214</string>
     <string>fbapi20130410</string>
     <string>fbapi20130702</string>
     <string>fbapi20131010</string>
     <string>fbapi20131219</string>
     <string>fbapi20140410</string>
     <string>fbapi20140116</string>
     <string>fbapi20150313</string>
     <string>fbapi20150629</string>
     <string>fbapi20160328</string>
     <string>fbauth</string>
     <string>fb-messenger-share-api</string>
     <string>fbauth2</string>
     <string>fbshareextension</string>
  </array>

NativeScript integration

Only required for iOS:

Normal NativeScript: Edit app/app.ts:

import { wireInFacebookLogin } from "@klippa/nativescript-login";

// ... Other code/wirings

wireInFacebookLogin();

// ... Other code/wirings

app.run({ moduleName: "app-root" });

NativeScript Angular: Edit src/main.ts:

// Other imports.
import { wireInFacebookLogin } from "@klippa/nativescript-login";

// ... Other code/wirings

wireInFacebookLogin();

// ... Other code/wirings

runNativeScriptAngularApp({
  appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
});

NativeScript Vue: Edit src/main.ts:

// Other imports.
import { wireInFacebookLogin } from "@klippa/nativescript-login";

// ... Other code/wirings

wireInFacebookLogin();

// ... Other code/wirings

new Vue({
  render: (h) => h('frame', [h(Home)]),
}).$start();

import { startFacebookLogin, FacebookLoginOptions } from "@klippa/nativescript-login";

// First create an options object:

// The most basic sign in options.
const loginOptions: FacebookLoginOptions = {};

// Please note that result can also be a failure result.
// The actual result is in the object.
startFacebookLogin(loginOptions).then((result) => {
    console.log("Facebook login result: ", result);
}).catch((e) => {
    console.log("Error while logging in to Facebook: ", e);
});

Warning: Facebook's Automatically Logged Events

When you use the Facebook SDK, certain events in your app are automatically logged and collected for Facebook Analytics unless you disable automatic event logging. You can disable it on Android and on iOS by doing minor configuration changes. If you are only using the Facebook SDK because of the login feature, I would advise to disable the "Automatically Logged Events" to prevent leaking information from your users to Facebook (even if there are not using Facebook).

Google Sign In

Android integration

• Follow the Configure a Google API Console project step in the manual.
• Follow the Get your backend server's OAuth 2.0 client ID step in the manual if you want to request a server auth code to request the user information server side.
• Logging in with your Google account should now work! The SDK takes care of the rest.

iOS integration

• Follow the Get an OAuth client ID step in the manual, note down the Client ID and download the credentials file.
• Open the credentials.plist and copy the value between <string> and </string> below <key>REVERSED_CLIENT_ID</key>.
• Open App_Resources/iOS/Info.plist and add the following, replace {{REVERSED_CLIENT_ID}} with the value you copied:

<key>CFBundleURLTypes</key>
<array>
    <!-- If you already have a CFBundleURLTypes key, only add the dict section to the array -->
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>{{REVERSED_CLIENT_ID}}</string>
        </array>
    </dict>
</array>

NativeScript integration

Only required for iOS:

Normal NativeScript:

Edit app/app.ts:

import { wireInGoogleSignIn } from "@klippa/nativescript-login";

// ... Other code/wirings

wireInGoogleSignIn("{{CLIENT_ID}}");

// ... Other code/wirings

app.run({ moduleName: "app-root" });

NativeScript Angular:

Edit src/main.ts:

// Other imports.
import { wireInGoogleSignIn } from "@klippa/nativescript-login";

// ... Other code/wirings

wireInGoogleSignIn("{{CLIENT_ID}}");

// ... Other code/wirings

runNativeScriptAngularApp({
  appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
});

NativeScript Vue: Edit src/main.ts:

// Other imports.
import { wireInGoogleSignIn } from "@klippa/nativescript-login";

// ... Other code/wirings

wireInGoogleSignIn("{{CLIENT_ID}}");

// ... Other code/wirings

new Vue({
  render: (h) => h('frame', [h(Home)]),
}).$start();

Open the credentials.plist and copy the value between <string> and </string> below <key>CLIENT_ID</key>. Replace {{CLIENT_ID}} with the value you copied.

import { GoogleSignInOptions, GoogleSignInType, startGoogleSignIn } from "@klippa/nativescript-login";

// First create an options object:

// The most basic sign in options.
const signInOptions: GoogleSignInOptions = {
    SignInType: GoogleSignInType.Local,
    RequestEmail: true
};

// Please note that result can also be a failure result.
// The actual result is in the object.
startGoogleSignIn(signInOptions).then((result) => {
    console.log("Google sign in result: ", result);
}).catch((e) => {
   console.log("Error while singing in to Google: ", e);
});

Sign In with Apple

• Go to the Apple developer website and create a new app identifier with the "Sign In with Apple" Capability enabled. Make sure you sign your app with a provisioning profile using that app identifier.
• Open your app's App_Resources/iOS folder and add this (or append) to a file named app.entitlements.

Android integration (and iOS < 13)

Sadly, Sign In with Apple does not support Android, due to the way they made the JS version, it's also not possible to create a version in a webview. You will always need a backend to handle it. I will write a how-to on this later.

iOS integration (iOS >= 13)

To start the login:

import { SignInWithAppleOptions, startSignInWithApple, SignInWithAppleScope, signInWithAppleAvailable } from "@klippa/nativescript-login";
import { Dialogs } from "@nativescript/core";

if (signInWithAppleAvailable()) {
    // First create an options object:
    const signInOptions: SignInWithAppleOptions = {
        Scopes: [SignInWithAppleScope.EMAIL, SignInWithAppleScope.FULLNAME]
    };

    // Please note that result can also be a failure result.
    // The actual result is in the object.
    startSignInWithApple(signInOptions).then((result) => {
        console.log("Sign In with Apple result: ", result);
    }).catch((e) => {
       console.log("Error while using Sign In with Apple: ", e);
    });
} else {
    Dialogs.alert("Sign In with Apple is not available for your device");
}

To get the current state:

import { getSignInWithAppleState, signInWithAppleAvailable } from "@klippa/nativescript-login";
import { Dialogs } from "@nativescript/core";

if (signInWithAppleAvailable()) {
    // User ID must be the ID that was previously received from the sign in.
    const userID = "";

    // Please note that result can also be a failure result.
    // The actual result is in the object.
    getSignInWithAppleState(userID).then((result) => {
        console.log("Sign in with Apple State result: ", result);
    }).catch((e) => {
       console.log("Error getting Sign in with Apple State: ", e);
    });
} else {
    Dialogs.alert("Sign In with Apple is not available for your device");
}

Other types of authentication

To keep the scope of this project simple and clean, and to keep the dependencies small, we only support login providers that have native SDK's. If you want to support other ways of logging in, please check out these projects:

• nativescript-oauth2
• nativescript-inappbrowser

API

Google

GoogleSignInOptions:

GoogleSignInResult:

Facebook

FacebookLoginOptions:

FacebookLoginResult:

Apple

SignInWithAppleOptions:

SignInWithAppleResult:

SignInWithAppleStateResult:

SignInWithAppleNameComponents:

About Klippa

Klippa is a scale-up from Groningen, The Netherlands and was founded in 2015 by six Dutch IT specialists with the goal to digitize paper processes with modern technologies.

We help clients enhance the effectiveness of their organization by using machine learning and OCR. Since 2015 more than a 1000 happy clients have been served with a variety of the software solutions that Klippa offers. Our passion is to help our clients to digitize paper processes by using smart apps, accounts payable software and data extraction by using OCR.

License

The MIT License (MIT)