เพิ่มการลงชื่อเข้าใช้เว็บแอปของคุณได้อย่างง่ายดายด้วย FirebaseUI

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

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

ก่อนที่คุณจะเริ่ม

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

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

    1. ซีดีเอ็น

      รวมสคริปต์และไฟล์ 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 และการขึ้นต่อกันผ่าน npm โดยใช้คำสั่งต่อไปนี้:

      $ npm install firebaseui --save
      

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

      var firebase = require('firebase');
      var firebaseui = require('firebaseui');
      
    3. ส่วนประกอบโบเวอร์

      ติดตั้ง FirebaseUI และการขึ้นต่อกันผ่าน 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 แล้ว ให้เริ่มต้น Auth UI

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

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

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

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

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

  2. เพิ่ม ID ผู้ให้บริการอีเมลลงในรายการ 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. เพิ่ม ID ผู้ให้บริการอีเมลลงในรายการ 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 สำหรับการลงชื่อเข้าใช้ลิงก์อีเมลสามารถกำหนดค่าเพื่ออนุญาตหรือบล็อกผู้ใช้จากการลงชื่อเข้าใช้ข้ามอุปกรณ์ได้

    สามารถกำหนดตัวเลือกเรียกกลับ emailLinkSignIn เพื่อส่งคืนการกำหนดค่า firebase.auth.ActionCodeSettings เพื่อใช้เมื่อส่งลิงก์ ซึ่งให้ความสามารถในการระบุวิธีจัดการลิงก์ ลิงก์ไดนามิกที่กำหนดเอง สถานะเพิ่มเติมในลิงก์ในรายละเอียด ฯลฯ เมื่อไม่ได้ระบุ ระบบจะใช้ 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 ที่กำหนดเองต่อผู้ให้บริการ คุณสามารถส่งออบเจ็กต์แทนการส่งเพียงค่าของผู้ให้บริการได้ ดังนี้

    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. เพิ่ม ID ผู้ให้บริการหมายเลขโทรศัพท์ลงในรายการ 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 ที่จะแสดงผลวิดเจ็ตการลงชื่อเข้าใช้ FirebaseUI

<!-- 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>

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

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 Auth:

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

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

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

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

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

มีหลายกรณีที่ผู้ใช้ซึ่งเริ่มลงชื่อเข้าใช้โดยไม่ระบุชื่อ พยายามอัปเกรดเป็นผู้ใช้ Firebase ที่มีอยู่ เนื่องจากผู้ใช้ที่มีอยู่ไม่สามารถเชื่อมโยงกับผู้ใช้ที่มีอยู่รายอื่น FirebaseUI จะทริกเกอร์การเรียกกลับ signInFailure พร้อมรหัสข้อผิดพลาด firebaseui/anonymous-upgrade-merge-conflict เมื่อเกิดเหตุการณ์ข้างต้น อ็อบเจ็กต์ข้อผิดพลาดจะมีข้อมูลรับรองถาวรด้วย การลงชื่อเข้าใช้ด้วยข้อมูลรับรองถาวรควรถูกทริกเกอร์ในการเรียกกลับเพื่อลงชื่อเข้าใช้ให้เสร็จสมบูรณ์ ก่อนที่จะสามารถลงชื่อเข้าใช้ให้เสร็จสมบูรณ์ผ่าน 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);
    }
  }
});

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

  • สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้และปรับแต่ง FirebaseUI โปรดไปที่ README
  • หากคุณพบปัญหาใน FirebaseUI และต้องการรายงาน ให้ใช้ ตัวติดตามปัญหา GitHub