在现今的互联网时代,几乎每一个APP或者网站都需要一个入口来方便用户的登录。绝大多数的网站和APP会选择像Facebook,Google和Twitter等开放认证平台的登陆功能来让用户通过他们已有的账户进行授权访问。
针对这个需求,很多第三方JavaScript库已经被开发出来,其中就包括 nativescript-facebook-login-webpack
。这是一个在前端领域非常受欢迎的NPM包,通过它,我们可以在 NativeScript
应用中实现 Facebook
登录。
数据结构
在正式开始使用这个包之前,我们需要先理解一下它的基本数据结构。下面是 nativescript-facebook-login-webpack
支持的基本数据结构:
FacebookLoginHandlerOptions
:
这是一个可选项,是用来影响 FacebookGraphUser
对象的输出格式。对应的代码结构如下:
------ --------- --------------------------- - ---------------- ------ ------------------ --------- -------------------- -- ---- ----------- ------- ------- -------------- --------- ------- -------- -------------- -
FacebookAuthResponse
:
这是Facebook oauth流程中的重要选项,这个类型表达了用Facebook Oauth认证成功后, FacebookLoginResult
对象 应该包含的基本数据结构。方法如下:
------ --------- -------------------- - ------------ ------- ---------- ------- -------------- ------- ------- ------- -- -------- -------- ---------------- ----- -- ------------ ------ ------------------ -
使用教程
在下面的步骤中,我们会学会如何在NativeScript应用中使用 nativescript-facebook-login-webpack
。
步骤一:安装
首先,我们需要在命令行窗口中跳转到项目的根目录下,然后使用以下命令来安装这个npm包:
- --- ------- -----------------------------------
步骤二:预先配置
在开始和Facebook进行交互之前,我们需要去Facebook开发者中心创建一个新的应用,在创建的应用中,你需要:
- 创建一个Facebook开发者帐号。
- 创建相应的应用程序。
- 为应用程序设置相应的OAuth访问标志符。
下面将是具体的操作步骤:
首先,你需要登陆你的Facebook账号,并访问Facebook开发者中心。
然后,你可以点击页面右上角的 “Add a New App” 按钮,来创建一个新应用程序。在这个过程中,你需要选择对应的 APP 类型并为其命名。
完成上述步骤后,在详情页面中,你需要做的下一个就是在应用程序中添加一个新的平台。
在这个平台中选择
Facebook Login
。然后,你将被重定向到一个新的页面,这个页面展示了你所创建的应用程序的App ID
和App Secret
。此时,你需要配置一个
Callback URL
,在登录Facebook
时会用到这个URL
。这个URL的构造形式如下:
---------------------------------------------------
在完成 URL
配置后,你需要添加 nativescript-facebook-login-webpack
到你的应用程序中。你可以在 main.ts
或 main.js
文件中,添加如下代码:
------ - ----- ----- -- ------- - ---- -------------------------------------- ------ - -------------------- - ---- -------------------------------------- -- -------- --- -- ----- ------ - -------------- -- -------- ----------- -- ---- --- ---- -- --- --- ------- -------- ----------- ----- ----------- - ------------------ --------- -- ----------- --- -------- ------- ------------- -- - -------- ---- ---- --- ---- -- ---- -------- ------ -------- ------- - -------------------- ------ -------- --------------------- -- - -- --- ------ ------ -------- --- ------ -------- ------- ---- --- ----- -------------------- -- -------------- ------- -- - ------------------ ---- ------ - - -------------- - - -------------- -- - ---------------------- ------- --- -
在这个代码中,你需要修改 YOUR_APP_ID
字段为你创建的APP的实际ID。
在这个过程中,我们也看到了如何用Facebook 账号进行登录,并以授权请求模式获得相关的 Facebook 认证。我们需要注意,此时我们所拥有的应用程序ID以及 Facebook 认证码是需要妥善保管的。
示例代码
在下面的代码中,你可以看到如何在应用程序中使用 nativescript-facebook-login-webpack
Npm 包。
------ - --------- - ---- ---------------- ------ - ----- ----- -- ------- - ---- -------------------------------------- ------ - -------------------- - ---- -------------------------------------- -- -------- --- -- ----- ------ - -------------- -- -------- ----------- -- ---- --- ---- -- --- --- ------- -------- ----------- ----- ----------- - ------------------ --------- ------------ --------- --------- --------- - ---- ---- ------- ---- ---- --- - -- ------ ----- ------------ - ------------- - -- ----------- --- -------- ------- ------------- - ------ ------- - -------------------- ------ -------- --------------------- -- - -- --- ------ ------ -------- --- ------ -------- ------- ---- --- ----- -------------------- -- -------------- ------- -- - ------------------ ---- ------ - - -------------- - - -------------- -- - ---------------------- ------- --- - -
总结
通过上节的步骤,我们可以看出这是一个非常方便使用的npm包,通过它我们能够快速在NativeScript项目中实现Facebook登录功能。虽然Facebook 授权的过程可能略微有些复杂,但是我们只需要简单地修改应用程序中的代码就可以充分利用到这个功能的强大。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005540b81e8991b448d1647