npm 包 Emberfire-phone-cordova 使用教程

介绍

Emberfire-phone-cordova 是一个通过 cordova 实现了 Firebase Authentication 验证，并支持各种 OAuth 提供商的 Ember Addon。本文将介绍如何安装和使用这个 npm 包。

准备

首先我们需要确保已经安装了 cordova 和 Ember.js，如果还没有安装可以通过下面的命令进行安装：

npm install -g cordova
npm install -g ember-cli

安装

安装 Emberfire-phone-cordova 可以通过 npm 包管理器来实现：

npm install --save-dev emberfire-phone-cordova

配置

在 config/environment.js 文件中加入 firebase 的配置：

-- -------------------- ---- -------
--- --- - -
  --------- -
    ------- ---------------
    ----------- -----------------------------------
    ------------ -------------------------------------------
    -------------- ----------------------------------
    ------------------ ------------------------
  -
--

在 config/environment.js 文件的 export default 中添加以下配置信息：

-- -------------------- ---- -------
-------------- - --------------------- -
  --- --- - -
    --------- -
      ---
    --
    -------- -
      ---------------- ------
      -------- ------
      --------- ----------
      -------- -
        ------------------------
        -------------------------------------
        ------------------------------
        --------------------------
      -
    -
  --

使用

1. 引入 emberfire-phone-cordova

在应用程序的 app.js 文件中，需要引入 Emberfire 和 Emberfire-phone-cordova。这可以在应用程序的 app.js 文件的顶部完成：

import Ember from 'ember';
import Firebase from 'firebase';
import EmberFire from 'emberfire';
import PhoneCordovaAuthProvider from 'emberfire-phone-cordova/auth-providers/cordova';

2. 定义一个 Login Controller

-- -------------------- ---- -------
------ ----- ---- --------

------ ------- -------------------------
  -------- -----------------------
  ------------ -----------------------
  -------------- ------------ ---------- --------- -------------------------------------

  -------- -
    ------------------- -
      ------------------------------------ -
        --------- -----------
        --------- --
      ---------- -- -
        ------------------------------------
      ---
    --

    ------------------ -
      ------------------------------------ -
        --------- ----------
        --------- --
      ---------- -- -
        ------------------------------------
      ---
    --

    ----------------- -
      ------------------------------------ -
        --------- ---------
        --------- --
      ---------- -- -
        ------------------------------------
      ---
    --

    ---------------- -
      --- -------- - ----------------------------------
      --- ----------------- - --- -------------------------------------------------------
      ------------------------------------ -
        --------- ------------------------------------
        --------- -
          --------- ------------------
          ------------ -----------------
        -
      ---------- -- -
        ------------------------------------
      ---
    -
  -
---

大部分 Login Controller 的部分都很简单，它们只是通过调用 session.open 方法将 provider 策略传递给 session。 注意：在 loginWithPhone 方法中的第 4 行中，需要为你的 OAuth 供应商提供电话号码。

3. 添加 recaptcha 验证

需要在 login-with-phone 的 template 中添加 recaptcha 验证，在这里，我们需要将对 recaptcha-verify 的调用和一个具有 id 为 recaptcha-container 的

{{#if isLoginWithPhone}}
<form>
  <div id="recaptcha-container"></div>
  <button {{action "loginWithPhone"}}>Login with Phone</button>
</form>
{{/if}}

-- -------------------- ---- -------
------ ------------------------ ---- -------------------------------------------------

------ ------- -------------------------
  ----------------- ------------------------------- -------- -- -
    ------ ------------------------------------------------------------------------
  ---

  -------- -
    ---------------- -
      --- ---- - -----
      --- -------- - ----------------------------------
      --- ----------- - ------------------------------------------- ----
      --- ----------------- - --- -------------------------------------------------------

      -------------------------------------------------- -------------------------------- -------------------- -
        --- ---------------- - -------------- ----- --- ------------ - -
          ----- ---- --- ---- -- ---- ------ ----------

        ------ ---------------------------------------------
      ---------------- -- -
        --------------------------------
      ----------------- ------- -
        -------------------- ---- ----- -------- -------
      ---
    -
  -
---

ember cordova emulate android -- --live-reload