firebase -認証の開始

14951 ワード
firebase beginners codenewbie テキストリンク
注:私はfirebaseアフィリエイトではない

Firebaseは何ですか?
Firebase Googleのクラウドツール、認証、ホスティング、およびWebやモバイルアプリケーションで使用するためのServerless関数などのツールを含むツールのコレクションです.Firebaseの魅力の一つは、無料層計画を開始するだけであなたのプロジェクトは、特定の使用番号を打つ一度支払う必要があります.
このポストでは、認証作業の基礎を歩きます.

プロジェクトの作成
「プロジェクト」はFireBaseがあなたのウェブサイト/アプリとFireBaseのサービスへの接続に言及する方法です.からfirebase.google.com , あなたは(右上)にサインすることができますクリックして“コンソールに移動”(右上隅)をクリックします.

コンソール
コンソールは、すべてのプロジェクトが住んでいる場所です.したら、あなたのアカウントにプロジェクトを追加したら、彼らはここに表示されます.プロジェクトのカードを選択すると、そのプロジェクトのダッシュボードに表示されます.

プロジェクトを追加する
プロジェクトの追加は非常に迅速なプロセスです.“プロジェクトを追加”カードをクリックして、プロジェクト名を追加し、必要に応じて場所を調整し、条件と条件(それを読んだ後、もちろん)を受け入れる!


自由プロジェクトに関するノート
それぞれのプロジェクトが独自の計画を取得することに言及するのはおそらく良い時期です.ですから、自由層制限を破ることができないプロジェクトについて心配する必要はありません.More Details ).

ウェブページの接続
FireBaseのサービスを使用する前に、ページとFireBaseの間のリンクを作成する必要があります.これを行うには、HTML終了タグ(左から3番目の白い背景アイコン)のようなアイコンをクリックします.

ここでは、あなたがあなたのアプリのニックネーム(これは何でもすることができます)を加えて、あなたが望むならばホスティングを加えるでしょう(FireBaseを通してあなたのウェブサイトを配備してください-私はこの記事でホスティングをカバーしていないので、私はこのチェックをしませんでした).
したら、“登録アプリ”をクリックすると、HTMLコードブロックと指示をあなたの最後に追加するに提供されます<body> (しかし、firebaseを使う前に).
私は、これをboilerplate HTMLファイルに加えていますindex.html ):
指定されたFireBaseConfigオブジェクト値を追加する必要があることに注意してください
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Firebase Example</title>
</head>
<body>
  <div id="firebaseui-auth-container">
    <!-- This is where the Login ui will load -->
  </div>
  <!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
  <script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-auth.js"></script>
<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    REPLACE THIS WITH THE CODE PROVIDED BY FIREBASE
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>
</body>
</html>

短い故障
このブロックでは、jQueryを使用した場合と同様のFirebaseが読み込まれます.
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>
このブロックは、あなたのページがロードしたい追加サービスで置き換えられます.この場合、認証サービスを読み込みます.
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-auth.js"></script>
最後に、このブロックは詳細をFireBaseに提供し、プロジェクトへの接続を作成します.これは電話であなたの友人を呼び出すように、彼らが答えるために待っている.一度彼らは、あなたの耳を話すことができる答え!
<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    REPLACE THIS WITH THE CODE PROVIDED BY FIREBASE
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>
プロジェクトが作成されたので、認証を追加しましょう.

認証
多くのアプリケーションは、認証システムの力を活用するが、様々なサービスへの接続を整理しようとすると、電子メールのログインを許可する多くの仕事をすることができます.ありがたいことに、FireBaseはあなたの手の仕事をたくさん取り、簡単に1つのサービスを開始し、時間をかけて追加のサービスを追加することができます.

認証を有効にする
認証を有効にするには、認証カードをクリックするか、左手のナビゲーションから「認証」を選択し、「一度ログインする方法」をクリックします.これは、あなたがユーザーがログインできるようにするプロバイダを設定することができます場所です.

このチュートリアルでは、これらは私が過去に使用した2つのオプションですので、私は電子メール/パスワードとGoogleに触れることになるでしょう.

メールアドレス
オプションで最も基本的なサイン、これはユーザーがサインアップするために自分のメール/パスワードを使用することができます.これを有効にするには、プロバイダのリスト内の記号から“電子メール/パスワード”をクリックした後、最初のトグルスイッチを反転し、“保存”をクリックして簡単です.


グーグルサイン
これにより、ユーザーがGoogleアカウントでログインすることができます(FireBaseに署名する方法に似ています).メール/パスワードに似ている場合は、有効にするスイッチを有効にすることができます“有効”には、ここに余分なステップがあります.あなたは、有効なGmailアカウントである必要があるサポートメールを追加する必要があります.これは、必要に応じてサポートメールを送信するユーザーです.


その他のオプション
外部サービスについては、プロバイダへの接続の詳細は対応するドキュメントにあります(ここでリンクされています).
  • Facebook

  • GitHub
  • Microsoft
  • Yahoo
  • Phone Number

    • 認証UI
    Firebaseに接続するための接続設定があるので、ユーザーのインターフェイスを追加する必要があります.私は使用するFirebase UI これには、次のように追加します.
          // ...
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    </script>
    <!-- Firebase UI -->
+    <script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css"
+    />    
+    <script src="./auth.js"></script>
  </body>
</html>
    これらの追加は必要なFireBase UI情報をロードしますが、どのような設定を使うべきかを教えてくださいauth.js ファイルが入っている).

    Authjs
    まず、我々は作成する必要がありますauth.js 同じディレクトリにindex.html ファイル.
    中auth.js , 以下を追加します.
    // 1) Create a new firebaseui.auth instance stored to our local variable ui
const ui = new firebaseui.auth.AuthUI(firebase.auth());

// 2) These are our configurations.
const uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult(authResult, redirectUrl) {
      return true;
    },
    uiShown() {
      document.getElementById('loader').style.display = 'none';
    },
  },
  signInFlow: 'popup',
  signInSuccessUrl: 'signedIn',
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    // Additional login options should be listed here
    // once they are enabled within the console.
  ],
};

// 3) Call the 'start' method on our ui class
// including our configuration options. 
ui.start('#firebaseui-auth-container', uiConfig);
    さて、あなたが開くならindex.html ブラウザでファイルを次のように読み込みます.

    🎉 おめでとう!あなたが使用する準備ができて認証UIを持っている!(サーバになるまで動作しません.

    TerabyteTiger / firebase-example
    Firebaseの例
    View on GitHub
    牛客網-データベースSQL実戦2
    Number of Islands