nativescript-login

:rocket: 在 NativeScript 中实现社交登录的最佳方式 :rocket

一个具有现代 SDK 的插件，允许使用各种提供程序进行身份验证，并访问所有 SDK 功能。

功能

• Facebook 登录
• Google 登录
• 使用 Apple 登录（仅限 iOS）
• 访问所有登录 SDK 功能

NativeScript 版本支持

安装（NS 8）

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

用法

Facebook 登录

Android 集成

• 遵循 手册 中的 1. 选择一个应用或创建一个新应用 步骤
• 编辑/创建您的 App_Resources/Android/src/main/res/values/strings.xml 文件并添加以下内容，替换 {{app-id}}、{{app-name}}、{{client-token}} 的值

<?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>

• 编辑您的 App_Resources/Android/src/main/AndroidManifest.xml 文件并在 <application> 元素内添加以下内容。

<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>

• 遵循 手册 中的 6. 为您的应用提供开发版和发布版的密钥哈希 步骤
• 现在使用您的 Facebook 账户登录应该可以正常工作了！SDK 会处理剩余的部分。

iOS 集成

• 遵循 手册 中的 1. 选择一个应用或创建一个新应用 步骤
• 在 3. 在 Facebook 上注册和配置您的应用 -> 3a. 添加您的 Bundle Identifier 步骤中输入您的 Bundle Identifier -> ** 打开 App_Resources/iOS/Info.plist 并添加以下内容，将 {{APP_ID}} 替换为您的应用 ID，将 {{CLIENT_TOKEN}} 替换为您的客户端令牌，将 {{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 集成

仅限 iOS 需要

普通 NativeScript：编辑 app/app.ts

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

// ... Other code/wirings

wireInFacebookLogin();

// ... Other code/wirings

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

NativeScript Angular：编辑 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：编辑 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);
});

警告：Facebook 的自动记录事件

当您使用 Facebook SDK 时，您的应用中的一些事件会自动记录并收集到 Facebook 分析中，除非您禁用自动事件记录。您可以在 Android 和 iOS 上通过进行一些小的配置更改来禁用它。如果您仅因为登录功能而使用 Facebook SDK，我建议禁用“自动记录事件”，以防止用户信息泄露到 Facebook（即使他们没有使用 Facebook）。

Google 登录

Android 集成

• 遵循 手册 中的 配置 Google API Console 项目 步骤。
• 如果您想请求服务器端代码以请求用户信息，请遵循 手册 中的 获取您的后端服务器的 OAuth 2.0 客户端 ID 步骤。
• 使用您的Google账户登录现在应该可以正常工作了！SDK会处理其余部分。

iOS 集成

• 按照手册中的“获取OAuth客户端ID”步骤操作，记下客户端ID并下载凭证文件。
• 打开credentials.plist，复制位于<string>和</string>之间、在<key>REVERSED_CLIENT_ID</key>下面的值。
• 打开App_Resources/iOS/Info.plist，添加以下内容，将{{REVERSED_CLIENT_ID}}替换为您复制的值

<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 集成

仅限 iOS 需要

正常原生Script

编辑app/app.ts

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

// ... Other code/wirings

wireInGoogleSignIn("{{CLIENT_ID}}");

// ... Other code/wirings

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

原生Script Angular

编辑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：编辑 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();

打开credentials.plist，复制位于<string>和</string>之间、在<key>CLIENT_ID</key>下面的值。将{{CLIENT_ID}}替换为您复制的值。

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);
});

使用Apple登录

• 前往Apple开发者网站，并创建一个新的应用程序标识符，启用“使用Apple登录”功能。确保使用该应用程序标识符使用配置文件对应用程序进行签名。
• 打开应用程序的App_Resources/iOS文件夹，并将以下内容添加（或附加）到名为app.entitlements的文件中。

Android集成（以及iOS < 13）

遗憾的是，“使用Apple登录”不支持Android，由于他们制作的JS版本，也无法在webview中创建版本。您将始终需要一个后端来处理它。我稍后会写一个教程。

iOS集成（iOS >= 13）

开始登录

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");
}

获取当前状态

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");
}

其他类型的身份验证

为了保持此项目的简单性和整洁，以及保持依赖项较小，我们仅支持具有原生SDK的登录提供商。如果您想支持其他登录方式，请查看这些项目

• nativescript-oauth2
• nativescript-inappbrowser

API

Google

GoogleSignInOptions:

GoogleSignInResult:

Facebook

FacebookLoginOptions:

FacebookLoginResult:

Apple

SignInWithAppleOptions:

SignInWithAppleResult:

SignInWithAppleStateResult:

SignInWithAppleNameComponents:

关于 Klippa

Klippa 是一家来自 荷兰格罗宁根 的成长型公司，并于 2015 年由六位荷兰 IT 专家创立，目标是使用现代技术数字化纸质流程。

我们通过使用机器学习和 OCR 帮助客户提高其组织的有效性。自 2015 年以来，我们已为 1000 多位满意的客户提供了 Klippa 提供的各类软件解决方案。我们的热情是帮助我们的客户通过使用智能应用程序、应付账款软件以及 OCR 进行数据提取来数字化纸质流程。

许可证

MIT 许可证（MIT）