NativeScript 社交登录

NativeScript 模块，用于社交（基于令牌）登录。

实现

许可证

MIT 许可证

文档

完整文档可在 readme.io 上找到。

变更

v1.4.x 到 1.5.x

Google

• 实现了 iOS 登录

v1.3.x 到 1.4.x

Facebook

• 实现了 iOS 登录

v1.2.x 到 1.3.x

Google

• ILoginConfiguration.google.isRequestAuthCode 的默认值现在为 (false)。此行为在未来将不再更改！

安装

运行

tns plugin add nativescript-social-login

在你的应用程序项目中安装模块。

Android

AndroidManifest.xml

权限

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- ... -->

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <!-- ... -->
</manifest>

字符串

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="facebook_app_id">{{ YOUR_FACEBOOK_APP_ID }}</string>
    <string name="fb_login_protocol_scheme">fb{{ YOUR_FACEBOOK_APP_ID }}</string>
</resources>

为调试构建设置 Android Google 登录

1. 您需要与您机器上的本地 Android 设置中的 debug.keystore 相关的 SHA1 值。例如，以下命令是在 Windows 机器上可能运行的命令

keytool -list -v -keystore C:/users/brad.martin/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

路径将根据您的机器上的路径而变化。Android 调试构建使用您机器上默认的 debug.keystore 签署，该 keystore 位于您的机器上。因此，当您在设备上运行调试构建时，由于调试应用是用具有调试 keystore 的 SHA1 值构建的，Google 将允许使用运行中的 .apk 进行身份验证。

2. 在 Google 开发者网站上创建一个应用 此处。
   • 输入应用名称。这可以是任何名称，但将在用户身份验证时显示。
   • 输入 Android 包名。包名是 android 应用名称，位于 package.json 中 nativescript 对象下的 id 属性。
   • 接下来配置 Google 服务。
   • 选择 Google Sign-In
   • 输入你的签名证书 SHA-1。这是你在运行 keytool 命令时的第一步中获得的 SHA1 值。
   • 启用 Google 登录
     • 如果只是启用 Google 登录，您不需要在应用程序内部配置文件。
3. 运行应用，并调用 loginWithGoogle() 应返回所选 Google 账户的数据。

iOS

GoogleService-Info.plist

您应该为您的应用程序生成一个 GoogleService-Info.plist 文件，并将其添加到 /app/App_Resources/iOS 文件夹。您可以在以下位置获取此文件并找到更多信息 - https://developers.google.com/identity/sign-in/ios/start-integrating

Info.plist

将以下内容添加到位于 app/App_Resources/iOS 的 Info.plist 文件中

<!-- FACEBOOK AND GOOGLE LOGIN -->
<key>CFBundleURLTypes</key>
    <array>
        <!-- GOOGLE START -->
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>{YOUR_GOOGLE_REVERSED_CLIENT_ID}</string>
                <!-- It shoud look like this: com.googleusercontent.apps.123123123-172648sdfsd76f8s7d6f8sd -->
                <!-- Get it from your GoogleService-Info.plist -->
                <!-- Read more - https://developers.google.com/identity/sign-in/ios/start-integrating -->
			</array>
		</dict>
		<!-- GOOGLE END -->
		<!-- FACEBOOK START -->
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
        <string>fb{YOUR_FACEBOOK_APP_ID_HERE}</string>
            </array>
        </dict>
    </array>
    <key>CFBundleVersion</key>
    <string>1.0</string>
    <key>FacebookAppID</key>
    <string>{YOUR_FACEBOOK_APP_ID_HERE}</string>
    <key>FacebookDisplayName</key>
    <string>FacebookLoginDemo</string>
    <!-- FACEBOOK END -->

https://developers.facebook.com/docs/ios

应用程序主文件

将以下内容添加到启动应用程序的文件中。在 application.start({ /* */ }); 或如果您使用 Angular，则添加到 platformNativeScriptDynamic().bootstrapModule(/* */) 之前添加以下代码

TypeScript

if (application.ios) {

  class MyDelegate extends UIResponder implements UIApplicationDelegate {
    public static ObjCProtocols = [UIApplicationDelegate];

    applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {
      let gglDelegate = false;

      try {
        const errorRef = new interop.Reference();
        GGLContext.sharedInstance().configureWithError(errorRef);

        const signIn = GIDSignIn.sharedInstance();
        gglDelegate = true;
      } catch (error) {
        console.log(error);
      }

      const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate

      return gglDelegate || fcbDelegate;
    }

    applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation) {
      const fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
      const gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate

      return fcbDelegate || gglDelegate;
    }
  }

  application.ios.delegate = MyDelegate;
}

JavaScript

if (application.ios) {
    var MyDelegate = (function (_super) {
        __extends(MyDelegate, _super);
        function MyDelegate() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        MyDelegate.prototype.applicationDidFinishLaunchingWithOptions = function (application, launchOptions) {
            var gglDelegate = false;
            try {
                var errorRef = new interop.Reference();
                GGLContext.sharedInstance().configureWithError(errorRef);
                var signIn = GIDSignIn.sharedInstance();
                gglDelegate = true;
            }
            catch (error) {
                console.log(error);
            }
            var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationDidFinishLaunchingWithOptions(application, launchOptions); // facebook login delegate
            return gglDelegate || fcbDelegate;
        };
        MyDelegate.prototype.applicationOpenURLSourceApplicationAnnotation = function (application, url, sourceApplication, annotation) {
            var fcbDelegate = FBSDKApplicationDelegate.sharedInstance().applicationOpenURLSourceApplicationAnnotation(application, url, sourceApplication, annotation); // facebook login delegate
            var gglDelegate = GIDSignIn.sharedInstance().handleURLSourceApplicationAnnotation(url, sourceApplication, annotation); // google login delegate
            return fcbDelegate || gglDelegate;
        };
        return MyDelegate;
    }(UIResponder));
    MyDelegate.ObjCProtocols = [UIApplicationDelegate];
    application.ios.delegate = MyDelegate;
}

用法

包含

将模块包含在你的代码中

import SocialLogin = require("nativescript-social-login");

初始化

import Application = require("application");
import SocialLogin = require("nativescript-social-login");

if (Application.android) {
    Application.android.on(Application.AndroidApplication.activityCreatedEvent, (event) => {
        let result = SocialLogin.init({
            activity: event.activity,
        });
    });
}

init() 函数接收一个（可选）对象，其结构如下

interface ILoginConfiguration {
    /**
     * The underlying custom activity to use.
     */
    activity?: android.app.Activity;

    /**
     * Facebook specific configuration.
     */
    facebook?: {
        /**
         * Initialize Facebook or not. Default: (true)
         */
        initialize?: boolean;
        /**
         * Should Logout current Facebook session or not. Default: (false)
         */
        clearSession?: boolean;
    }

    /**
     * Google specific configuration.
     */
    google?: {
        /**
         * Initialize Google or not. Default: (true)
         */
        initialize?: boolean;

       /**
        * The server client ID for requesting server auth token.
        */
        serverClientId?: string;

        /**
         * If true, it will request for offline auth code which server can use for fetching or refreshing auth tokens.
         * It will be set in authCode property of result object.
         *
         * If false (default), it will request for token id. it will be set in authToken property of result object.
         */
        isRequestAuthCode?: boolean;
    }

    /**
     * Fallback action for the result of the underlying activity.
     */
    onActivityResult?: (requestCode: number, resultCode: number, data: any) => void;
}

init() 返回的 result 对象具有以下结构

interface IInitializationResult {
    facebook: {
        error: any,
        isInitialized: boolean,
    },
    google: {
        error: any,
        isInitialized: boolean,
    },
    twitter: {
        error: any,
        isInitialized: boolean,
    }
}

isInitialized 可以是 (true) 表示成功，(false) 表示失败，(undefined) 表示“不支持”，(null) 表示已跳过的提供者。

当初始化过程中抛出异常时，才会定义 error 属性。

登录

如果您想使用登录功能，您必须提交一个回调函数，该函数接收一个具有以下结构的对象

interface ILoginResult {
    /**
     * Gets the auth token (if requested).
     */
    authToken?: string;

    /**
     * Offline auth code used by servers to request new auth tokens.
     */
    authCode?: string;

    /**
     * Gets the result code.
     */
    code: LoginResultType;

    /**
     * The display name.
     */
    displayName?: string;

    /**
     * First name of the user.
     */
    firstName?: string;

    /**
     * Last name of the user.
     */
    lastName?: string;

    /**
     * Gets the error (if defined).
     */
    error?: any;

    /**
     * The ID of the user.
     */
    id?: string;

    /**
     * The photo URL.
     */
    photo?: string;

    /**
     * Gets the underlying provider.
     */
    provider?: string;

    /**
     * The user token, like email address.
     */
    userToken?: string;
}

以下函数已实现

示例

SocialLogin.loginWithFacebook(
    (result) => {
        console.log("code: " + result.code);
        console.log("error: " + result.error);
        console.log("userToken: " + result.userToken);
        console.log("displayName: " + result.displayName);
        console.log("photo: " + result.photo);
        console.log("authToken: " + result.authToken);
    }
);

值得注意的是，对于基于 Angular 的应用程序，此回调应该在 NgZone 中包装，以便 Angular 在完成时正确地更新视图。

import { Component, NgZone } from "angular/core";

@Component({})
class SigninComponent {
    constructor(private ngZone: NgZone) {}

    login() {
        SocialLogin.loginWithFacebook((result) => {
            this.ngZone.run(() => {
                console.log("code: " + result.code);
                console.log("error: " + result.error);
                console.log("userToken: " + result.userToken);
                console.log("displayName: " + result.displayName);
                console.log("photo: " + result.photo);
                console.log("authToken: " + result.authToken);
            });
        });
    }
}

还有由 dgomezs 提供的优秀示例，展示了如何为 Facebook 配置您的应用程序。

日志记录

如果您想获取模块的日志输出，可以使用 SocialLogin.addLogger() 函数添加一个回调函数，该函数接收来自模块的消息

SocialLogin.addLogger(function(msg: any, tag: string) {
    console.log('[nativescript-social-login]: (' + tag + '): ' + msg);
});

贡献者

• Fábio Araújo
• Brad Martin
• Jeremiah Ogbomo
• Shripal Soni
• Andrii Votiakov
• Felipe Waku