เพิ่มการลงชื่อเข้าใช้ไปยังเว็บแอปได้ง่ายๆ ด้วย Firebase UI

FirebaseUI เป็นไลบรารีที่สร้างขึ้นจาก ของ SDK การตรวจสอบสิทธิ์ Firebase ที่มีขั้นตอน UI แบบดรอปอินเพื่อใช้ใน แอปของคุณ Firebase UI มีประโยชน์ดังต่อไปนี้

  • ผู้ให้บริการหลายราย - ขั้นตอนการลงชื่อเข้าใช้อีเมล/รหัสผ่าน ลิงก์อีเมล โทรศัพท์ การตรวจสอบสิทธิ์, Google, Facebook, Twitter และ GitHub Sign-In
  • การลิงก์บัญชี - ขั้นตอนในการลิงก์บัญชีผู้ใช้ผ่านข้อมูลประจำตัวอย่างปลอดภัย ผู้ให้บริการเครือข่าย
  • การปรับแต่ง - ลบล้างรูปแบบ CSS ของ FirebaseUI เพื่อให้ตรงกับแอปของคุณ นอกจากนี้ เนื่องจาก FirebaseUI เป็นโอเพนซอร์ส คุณจึงสามารถแยก โปรเจ็กต์และปรับแต่งให้ตรงกับความต้องการของคุณ
  • การลงชื่อสมัครใช้ด้วยการแตะเพียงครั้งเดียวและการลงชื่อเข้าใช้โดยอัตโนมัติ - การผสานรวมอัตโนมัติกับ การลงชื่อสมัครใช้ด้วยการแตะเพียงครั้งเดียว เพื่อการลงชื่อเข้าใช้ข้ามอุปกรณ์อย่างรวดเร็ว
  • UI เวอร์ชันแปล - การปรับให้เป็นสากลสำหรับกว่า 40 ภาษา
  • การอัปเกรดผู้ใช้ที่ไม่ระบุชื่อ - ความสามารถในการอัปเกรดผู้ใช้ที่ไม่ระบุชื่อผ่าน ลงชื่อเข้าใช้/ลงชื่อสมัครใช้ สำหรับข้อมูลเพิ่มเติม โปรดไปที่หัวข้อการอัปเกรดผู้ใช้ที่ไม่ระบุชื่อ

ก่อนเริ่มต้น

  1. เพิ่มการตรวจสอบสิทธิ์ Firebase ลงในเว็บแอปพลิเคชัน ตรวจสอบว่าคุณใช้ v9 ที่เข้ากันได้ (แนะนำ) หรือ SDK รุ่นเก่า (ดู แถบด้านข้างด้านบน)

  2. รวม FirebaseUI ผ่านตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

    1. CDN

      รวมสคริปต์และไฟล์ CSS ต่อไปนี้ใน <head> แท็กของ หน้าเว็บของคุณด้านล่างข้อมูลโค้ดการเริ่มต้นจากคอนโซล Firebase

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

    2. โมดูล npm

      ติดตั้ง FirebaseUI และทรัพยากร Dependency ผ่าน npm โดยใช้คำสั่งต่อไปนี้ คำสั่ง:

      $ npm install firebaseui --save

      requireโมดูลต่อไปนี้ภายในไฟล์ต้นฉบับของคุณ:

      var firebase = require('firebase');
var firebaseui = require('firebaseui');

    3. ส่วนประกอบเครื่องตัดหญ้า

      ติดตั้ง FirebaseUI และทรัพยากร Dependency ผ่าน Bower โดยใช้คำสั่งต่อไปนี้ คำสั่ง:

      $ bower install firebaseui --save

      รวมไฟล์ที่จำเป็นไว้ใน HTML หากเซิร์ฟเวอร์ HTTP แสดง ไฟล์ภายใน bower_components/:

      <script src="bower_components/firebaseui/dist/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />

เริ่มต้น FirebaseUI

หลังจากนำเข้า SDK แล้ว ให้เริ่มต้น UI การตรวจสอบสิทธิ์

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

ตั้งค่าวิธีการลงชื่อเข้าใช้

ก่อนที่จะใช้ Firebase เพื่อให้ผู้ใช้ลงชื่อเข้าใช้ คุณต้องเปิดใช้และกำหนดค่า วิธีการลงชื่อเข้าใช้ที่ต้องการรองรับ

อีเมลและรหัสผ่าน

  1. ในคอนโซล Firebase ให้เปิดส่วนการตรวจสอบสิทธิ์แล้วเปิดใช้ การตรวจสอบสิทธิ์อีเมลและรหัสผ่าน

  2. เพิ่มรหัสผู้ให้บริการอีเมลลงในรายการ FirebaseUI signInOptions

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  3. ไม่บังคับ: สามารถกำหนดค่า EmailAuthProvider เพื่อกำหนดให้ผู้ใช้ เพื่อป้อนชื่อที่แสดง (ค่าเริ่มต้นคือ true)

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false
    }
  ]
});

  1. เปิดส่วนการตรวจสอบสิทธิ์ในคอนโซล Firebase ใน แท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการอีเมล/รหัสผ่าน หมายเหตุ ต้องเปิดใช้การลงชื่อเข้าใช้อีเมล/รหัสผ่านเพื่อใช้การลงชื่อเข้าใช้ลิงก์อีเมล

  2. ในส่วนเดียวกัน ให้เปิดใช้การลงชื่อเข้าใช้ลิงก์อีเมล (การลงชื่อเข้าใช้แบบไม่ต้องใช้รหัสผ่าน) และคลิกบันทึก

  3. เพิ่มรหัสผู้ให้บริการอีเมลลงในรายการ FirebaseUI signInOptions ควบคู่ไปกับ ด้วยลิงก์อีเมล signInMethod

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
    }
  ],
  // Other config options...
});

  4. เมื่อแสดงผล UI การลงชื่อเข้าใช้ตามเงื่อนไข (เกี่ยวข้องกับแอปแบบหน้าเดียว) ใช้ ui.isPendingRedirect() เพื่อตรวจหาว่า URL ตรงกับการลงชื่อเข้าใช้หรือไม่ ด้วยลิงก์อีเมลและ UI จำเป็นต้องแสดงผลเพื่อลงชื่อเข้าใช้ให้เสร็จสมบูรณ์

    // Is there an email link sign-in?
if (ui.isPendingRedirect()) {
  ui.start('#firebaseui-auth-container', uiConfig);
}
// This can also be done via:
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  ui.start('#firebaseui-auth-container', uiConfig);
}

  5. ไม่บังคับ: ใช้ EmailAuthProvider สำหรับการลงชื่อเข้าใช้ลิงก์อีเมลได้ กำหนดค่าให้อนุญาตหรือบล็อกผู้ใช้ไม่ให้ลงชื่อเข้าใช้ข้ามอุปกรณ์เสร็จสมบูรณ์

    คุณกำหนด Callback emailLinkSignIn ที่ไม่บังคับให้แสดงผลฟังก์ชัน firebase.auth.ActionCodeSettings การกำหนดค่าที่จะใช้เมื่อส่งลิงก์ วิธีนี้ช่วยให้คุณทำสิ่งต่อไปนี้ได้ ระบุวิธีจัดการลิงก์ ลิงก์แบบไดนามิกที่กำหนดเอง สถานะเพิ่มเติม ใน Deep Link เป็นต้น เมื่อไม่ได้ระบุ ระบบจะใช้ URL ปัจจุบันและเว็บ จะทริกเกอร์เฉพาะโฟลว์

    การลงชื่อเข้าใช้ลิงก์อีเมลใน FirebaseUI-web ใช้ได้กับ FirebaseUI-Android และ FirebaseUI-iOS ซึ่งผู้ใช้รายหนึ่งที่เริ่มต้นขั้นตอนจาก FirebaseUI-Android จะเปิดลิงก์ได้ และลงชื่อเข้าใช้ด้วย FirebaseUI-web ซึ่งตรงกันข้าม 

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
      // Allow the user the ability to complete sign-in cross device,
      // including the mobile apps specified in the ActionCodeSettings
      // object below.
      forceSameDevice: false,
      // Used to define the optional firebase.auth.ActionCodeSettings if
      // additional state needs to be passed along request and whether to open
      // the link in a mobile app if it is installed.
      emailLinkSignIn: function() {
        return {
          // Additional state showPromo=1234 can be retrieved from URL on
          // sign-in completion in signInSuccess callback by checking
          // window.location.href.
          url: 'https://www.example.com/completeSignIn?showPromo=1234',
          // Custom FDL domain.
          dynamicLinkDomain: 'example.page.link',
          // Always true for email link sign-in.
          handleCodeInApp: true,
          // Whether to handle link in iOS app if installed.
          iOS: {
            bundleId: 'com.example.ios'
          },
          // Whether to handle link in Android app if opened in an Android
          // device.
          android: {
            packageName: 'com.example.android',
            installApp: true,
            minimumVersion: '12'
          }
        };
      }
    }
  ]
});

ผู้ให้บริการ OAuth (Google, Facebook, Twitter และ GitHub)

  1. ในคอนโซล Firebase ให้เปิดส่วนการตรวจสอบสิทธิ์แล้วเปิดใช้ การลงชื่อเข้าใช้ของผู้ให้บริการ OAuth ที่ระบุ โปรดตรวจสอบว่า OAuth ที่เกี่ยวข้อง มีการระบุรหัสไคลเอ็นต์และข้อมูลลับด้วย

  2. นอกจากนี้ในส่วนการตรวจสอบสิทธิ์ ให้ตรวจสอบว่าโดเมน หน้าลงชื่อเข้าใช้จะแสดงผลและอยู่ในรายการโดเมนที่ได้รับอนุญาตด้วย

  3. เพิ่มรหัสผู้ให้บริการ OAuth ลงในรายการ FirebaseUI signInOptions

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    // List of OAuth providers supported.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. ไม่บังคับ: หากต้องการระบุขอบเขตที่กำหนดเอง หรือพารามิเตอร์ OAuth ที่กำหนดเองตาม คุณจะส่งผ่านออบเจ็กต์แทนการส่งเพียงค่า provider ได้

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      scopes: [
        'https://www.googleapis.com/auth/contacts.readonly'
      ],
      customParameters: {
        // Forces account selection even when one account
        // is available.
        prompt: 'select_account'
      }
    },
    {
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      scopes: [
        'public_profile',
        'email',
        'user_likes',
        'user_friends'
      ],
      customParameters: {
        // Forces password re-entry.
        auth_type: 'reauthenticate'
      }
    },
    firebase.auth.TwitterAuthProvider.PROVIDER_ID, // Twitter does not support scopes.
    firebase.auth.EmailAuthProvider.PROVIDER_ID // Other providers don't need to be given as object.
  ]
});

หมายเลขโทรศัพท์

  1. ในคอนโซล Firebase ให้เปิดส่วนการตรวจสอบสิทธิ์แล้วเปิดใช้ การลงชื่อเข้าใช้หมายเลขโทรศัพท์

  2. ตรวจสอบให้แน่ใจว่าโดเมนที่จะแสดงหน้าลงชื่อเข้าใช้ของคุณจะปรากฏขึ้นด้วย อยู่ในรายการโดเมนที่ได้รับอนุญาตแล้ว

  3. เพิ่มรหัสผู้ให้บริการหมายเลขโทรศัพท์ลงในรายการ FirebaseUI signInOptions

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. ไม่บังคับ: กำหนดค่า PhoneAuthProvider ได้ด้วย reCAPTCHA ที่กำหนดเอง แสดงหรือไม่แสดง reCAPTCHA (ค่าเริ่มต้นเป็นปกติ) โปรดดู เอกสารเกี่ยวกับ reCAPTCHA API เพื่อดูรายละเอียดเพิ่มเติม

    นอกจากนี้ยังตั้งค่าประเทศเริ่มต้นที่จะเลือกประเทศในการป้อนหมายเลขโทรศัพท์ได้ด้วย โปรดดู รายการรหัสประเทศที่รองรับ สำหรับรายการรหัสทั้งหมด หากไม่ระบุ หมายเลขโทรศัพท์ที่ป้อนจะมีค่าเริ่มต้นเป็นสหรัฐอเมริกา (+1)

    ปัจจุบันระบบรองรับตัวเลือกต่อไปนี้

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
      recaptchaParameters: {
        type: 'image', // 'audio'
        size: 'normal', // 'invisible' or 'compact'
        badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
      },
      defaultCountry: 'GB', // Set default country to the United Kingdom (+44).
      // For prefilling the national number, set defaultNationNumber.
      // This will only be observed if only phone Auth provider is used since
      // for multiple providers, the NASCAR screen will always render first
      // with a 'sign in with phone number' button.
      defaultNationalNumber: '1234567890',
      // You can also pass the full phone number string instead of the
      // 'defaultCountry' and 'defaultNationalNumber'. However, in this case,
      // the first country ID that matches the country code will be used to
      // populate the country selector. So for countries that share the same
      // country code, the selected country may not be the expected one.
      // In that case, pass the 'defaultCountry' instead to ensure the exact
      // country is selected. The 'defaultCountry' and 'defaultNationaNumber'
      // will always have higher priority than 'loginHint' which will be ignored
      // in their favor. In this case, the default country will be 'GB' even
      // though 'loginHint' specified the country code as '+1'.
      loginHint: '+11234567890'
    }
  ]
});

ลงชื่อเข้าใช้

หากต้องการเริ่มขั้นตอนการลงชื่อเข้าใช้ FirebaseUI ให้เริ่มต้นอินสแตนซ์ FirebaseUI ภายในวันที่ กำลังส่งผ่านอินสแตนซ์ Auth ที่สำคัญ

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

กำหนดองค์ประกอบ HTML ที่จะแสดงวิดเจ็ตการลงชื่อเข้าใช้ Firebase UI

<!-- The surrounding HTML is left untouched by FirebaseUI.
     Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>

ระบุการกำหนดค่า Firebase UI (ผู้ให้บริการที่รองรับและการปรับแต่ง UI รวมทั้ง Callback ที่ประสบความสำเร็จ เป็นต้น)

var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      return true;
    },
    uiShown: function() {
      // The widget is rendered.
      // Hide the loader.
      document.getElementById('loader').style.display = 'none';
    }
  },
  // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
  signInFlow: 'popup',
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Terms of service url.
  tosUrl: '<your-tos-url>',
  // Privacy policy url.
  privacyPolicyUrl: '<your-privacy-policy-url>'
};

สุดท้าย แสดงผลอินเทอร์เฟซการตรวจสอบสิทธิ์ FirebaseUI ดังนี้

// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);

การอัปเกรดผู้ใช้ที่ไม่ระบุชื่อ

การเปิดใช้การอัปเกรดผู้ใช้แบบไม่ระบุตัวตน

เมื่อผู้ใช้ที่ไม่ระบุชื่อลงชื่อเข้าใช้หรือลงชื่อสมัครใช้ด้วยบัญชีถาวรนี้ คุณจะต้อง เพื่อให้แน่ใจว่าผู้ใช้จะทำสิ่งที่ทำอยู่ต่อไปได้ก่อนที่จะลงชื่อสมัครใช้ เพียงตั้งค่า autoUpgradeAnonymousUsers เป็น true เมื่อกำหนดค่า UI การลงชื่อเข้าใช้ (ตัวเลือกนี้ถูกปิดใช้งานโดยค่าเริ่มต้น)

การจัดการความขัดแย้งในการรวมการอัปเกรดผู้ใช้ที่ไม่ระบุตัวตน

มีบางกรณีที่ผู้ใช้พยายามอัปเกรด ซึ่งตอนแรกลงชื่อเข้าใช้แบบไม่ระบุตัวตน ให้กับผู้ใช้ Firebase ที่มีอยู่ เนื่องจากผู้ใช้ที่มีอยู่ไม่สามารถลิงก์กับผู้ใช้อื่นได้ ผู้ใช้ที่มีอยู่ FirebaseUI จะทริกเกอร์ Callback signInFailure ด้วย รหัสข้อผิดพลาด firebaseui/anonymous-upgrade-merge-conflict เมื่อข้อมูลข้างต้นเกิดขึ้น ออบเจ็กต์ข้อผิดพลาดจะมีข้อมูลเข้าสู่ระบบถาวรด้วย ลงชื่อเข้าใช้ด้วย ควรมีการเรียกใช้ข้อมูลเข้าสู่ระบบถาวรใน Callback เพื่อการลงชื่อเข้าใช้ให้เสร็จสมบูรณ์ ก่อนที่จะลงชื่อเข้าใช้ให้เสร็จสิ้นผ่าน auth.signInWithCredential(error.credential) คุณต้องบันทึกข้อมูลที่ไม่ระบุตัวตน ข้อมูลผู้ใช้ และลบผู้ใช้ที่ไม่ระบุชื่อ เมื่อลงชื่อเข้าใช้เสร็จแล้ว ให้คัดลอก ข้อมูลกลับไปยังผู้ใช้ที่ไม่ระบุชื่อ ตัวอย่างด้านล่างแสดงวิธีการ น่าจะได้ผล

// Temp variable to hold the anonymous user data if needed.
var data = null;
// Hold a reference to the anonymous current user.
var anonymousUser = firebase.auth().currentUser;
ui.start('#firebaseui-auth-container', {
  // Whether to upgrade anonymous users should be explicitly provided.
  // The user must already be signed in anonymously before FirebaseUI is
  // rendered.
  autoUpgradeAnonymousUsers: true,
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    // signInFailure callback must be provided to handle merge conflicts which
    // occur when an existing credential is linked to an anonymous user.
    signInFailure: function(error) {
      // For merge conflicts, the error.code will be
      // 'firebaseui/anonymous-upgrade-merge-conflict'.
      if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
        return Promise.resolve();
      }
      // The credential the user tried to sign in with.
      var cred = error.credential;
      // Copy data from anonymous user to permanent user and delete anonymous
      // user.
      // ...
      // Finish sign-in after data is copied.
      return firebase.auth().signInWithCredential(cred);
    }
  }
});

ขั้นตอนถัดไป