ตรวจสอบสิทธิ์โดยใช้ Yahoo ด้วย JavaScript

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

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

หากต้องการลงชื่อเข้าใช้ให้ผู้ใช้ด้วยบัญชี Yahoo ก่อนอื่นคุณต้องเปิดใช้ Yahoo เป็นผู้ให้บริการการลงชื่อเข้าใช้สำหรับโปรเจ็กต์ Firebase โดยทำดังนี้

  1. เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript
  2. ในคอนโซล Firebase ให้เปิดส่วนการตรวจสอบสิทธิ์
  3. ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการ Yahoo
  4. เพิ่มรหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์จาก Play Console ของผู้ให้บริการรายนั้นลงในการกำหนดค่าผู้ให้บริการ ดังนี้

    1. หากต้องการลงทะเบียนไคลเอ็นต์ Yahoo OAuth ให้ทำตามเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ Yahoo ในหัวข้อ การลงทะเบียนเว็บแอปพลิเคชันกับ Yahoo

      โปรดเลือกสิทธิ์ OpenID Connect API 2 สิทธิ์ ได้แก่ profile และ email

    2. เมื่อลงทะเบียนแอปกับผู้ให้บริการเหล่านี้ อย่าลืมจดทะเบียนโดเมน *.firebaseapp.com สำหรับโปรเจ็กต์เป็นโดเมนเปลี่ยนเส้นทางสำหรับแอป
  5. คลิกบันทึก

จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK

หากคุณกำลังสร้างเว็บแอป วิธีที่ง่ายที่สุดในการตรวจสอบสิทธิ์ผู้ใช้ด้วย Firebase โดยใช้บัญชี Yahoo คือการจัดการขั้นตอนการลงชื่อเข้าใช้ทั้งหมดด้วย Firebase JavaScript SDK

หากต้องการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทำตามขั้นตอนต่อไปนี้

  1. สร้างอินสแตนซ์ของ OAuthProvider โดยใช้รหัสผู้ให้บริการ yahoo.com

    Web Modular API

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');
    auth_yahoo_provider_create.js

    API ที่ใช้เนมสเปซในเว็บ

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    yahoo-oauth.js

  2. ไม่บังคับ: ระบุพารามิเตอร์ OAuth ที่กำหนดเองเพิ่มเติมที่ต้องการส่งด้วยคำขอ OAuth

    Web Modular API

    provider.setCustomParameters({
  // Prompt user to re-authenticate to Yahoo.
  prompt: 'login',
  // Localize to French.
  language: 'fr'
});  
    auth_yahoo_provider_params.js

    API ที่ใช้เนมสเปซในเว็บ

    provider.setCustomParameters({
  // Prompt user to re-authenticate to Yahoo.
  prompt: 'login',
  // Localize to French.
  language: 'fr'
});  
    yahoo-oauth.js

    โปรดดูพารามิเตอร์ที่ Yahoo รองรับในเอกสาร OAuth ของ Yahoo โปรดทราบว่าคุณไม่สามารถส่งพารามิเตอร์ที่จำเป็นสำหรับ Firebase ด้วย setCustomParameters() พารามิเตอร์เหล่านี้ได้แก่ client_id, redirect_uri, response_type, scope และ state

  3. ไม่บังคับ: ระบุขอบเขต OAuth 2.0 เพิ่มเติมนอกเหนือจาก profile และ email ที่ต้องการขอจากผู้ให้บริการการตรวจสอบสิทธิ์ หากแอปพลิเคชันของคุณต้องการเข้าถึงข้อมูลส่วนตัวของผู้ใช้จาก Yahoo API คุณจะต้องขอสิทธิ์ไปยัง Yahoo APIs ในสิทธิ์ API ใน แผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Yahoo ขอบเขต OAuth ที่ขอต้องตรงกันทุกประการกับขอบเขตที่กำหนดค่าไว้ล่วงหน้าในสิทธิ์ API ของแอป ตัวอย่างเช่น หากมีการขอสิทธิ์การเข้าถึงระดับอ่าน/เขียนไปยังรายชื่อติดต่อของผู้ใช้ และกำหนดค่าล่วงหน้าไว้ในสิทธิ์ API ของแอป คุณจะต้องส่ง sdct-w แทนขอบเขต OAuth แบบอ่านอย่างเดียว sdct-r มิฉะนั้น จะดำเนินการไม่สำเร็จและจะแสดงข้อผิดพลาดต่อผู้ใช้ปลายทาง

    Web Modular API

    // Request access to Yahoo Mail API.
provider.addScope('mail-r');
// Request read/write access to user contacts.
// This must be preconfigured in the app's API permissions.
provider.addScope('sdct-w');
    auth_yahoo_provider_scopes.js

    API ที่ใช้เนมสเปซในเว็บ

    // Request access to Yahoo Mail API.
provider.addScope('mail-r');
// Request read/write access to user contacts.
// This must be preconfigured in the app's API permissions.
provider.addScope('sdct-w');
    yahoo-oauth.js

    โปรดดูข้อมูลเพิ่มเติมในเอกสารประกอบเกี่ยวกับขอบเขต Yahoo

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

    • หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป โปรดโทรหา signInWithPopup

      Web Modular API

      import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile
    // ...

    // Yahoo OAuth access token and ID token can be retrieved by calling:
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });
      auth_yahoo_signin_popup.js

      API ที่ใช้เนมสเปซในเว็บ

      firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    const credential = result.credential;

    // Yahoo OAuth access token and ID token can be retrieved by calling:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });
      yahoo-oauth.js

    • หากต้องการลงชื่อเข้าใช้โดยการเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ โปรดโทรไปที่ signInWithRedirect

    ทำตามแนวทางปฏิบัติแนะนำเมื่อใช้ signInWithRedirect, linkWithRedirect หรือ reauthenticateWithRedirect 

      firebase.auth().signInWithRedirect(provider);

    หลังจากที่ผู้ใช้ลงชื่อเข้าใช้จนเสร็จและกลับไปที่หน้าเว็บแล้ว คุณจะรับผลการลงชื่อเข้าใช้ได้โดยโทรไปที่ getRedirectResult

    Web Modular API

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_yahoo_signin_redirect.js

    API ที่ใช้เนมสเปซในเว็บ

    firebase.auth().signInWithRedirect(provider);
    yahoo-oauth.js

    เมื่อดำเนินการเสร็จสมบูรณ์แล้ว คุณจะดึงโทเค็นรหัส OAuth และโทเค็นเพื่อการเข้าถึงที่เชื่อมโยงกับผู้ให้บริการได้จากออบเจ็กต์ firebase.auth.UserCredential ที่แสดงผล

    เมื่อใช้โทเค็นเพื่อการเข้าถึง OAuth คุณจะเรียกใช้ Yahoo API ได้

    ตัวอย่างเช่น ในการรับข้อมูลโปรไฟล์พื้นฐาน อาจเรียก API ของ REST ต่อไปนี้

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json

    โดยที่ YAHOO_USER_UID คือรหัสผู้ใช้ Yahoo ซึ่งดึงมาจากช่อง firebase.auth().currentUser.providerData[0].uid หรือจาก result.additionalUserInfo.profile

  5. นอกจากตัวอย่างข้างต้นจะมุ่งเน้นที่ขั้นตอนการลงชื่อเข้าใช้ คุณยังลิงก์ผู้ให้บริการ Yahoo กับผู้ใช้ที่มีอยู่โดยใช้ linkWithPopup/linkWithRedirect ได้ด้วย เช่น คุณสามารถลิงก์ผู้ให้บริการหลายรายกับผู้ใช้รายเดียวกันเพื่อให้ผู้ให้บริการเหล่านั้นลงชื่อเข้าใช้ด้วยได้

    Web Modular API

    import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');
const auth = getAuth();
linkWithPopup(auth.currentUser, provider)
    .then((result) => {
      // Yahoo credential is linked to the current user.
      // IdP data available in result.additionalUserInfo.profile.

      // Get the OAuth access token and ID Token
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
      const idToken = credential.idToken;
    })
    .catch((error) => {
      // Handle error.
    });
    auth_yahoo_link_popup.js

    API ที่ใช้เนมสเปซในเว็บ

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
firebase.auth().currentUser.linkWithPopup(provider)
    .then((result) => {
      // Yahoo credential is linked to the current user.
      // IdP data available in result.additionalUserInfo.profile.
      // Yahoo OAuth access token can be retrieved by calling:
      // result.credential.accessToken
      // Yahoo OAuth ID token can be retrieved by calling:
      // result.credential.idToken
    })
    .catch((error) => {
      // Handle error.
    });
    yahoo-oauth.js

  6. รูปแบบเดียวกันนี้ใช้ได้กับ reauthenticateWithPopup/reauthenticateWithRedirect ซึ่งสามารถใช้เพื่อดึงข้อมูลเข้าสู่ระบบใหม่สำหรับการดำเนินการที่มีความละเอียดอ่อนซึ่งต้องใช้การเข้าสู่ระบบล่าสุด

    Web Modular API

    import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');
const auth = getAuth();
reauthenticateWithPopup(auth.currentUser, provider)
    .then((result) => {
      // User is re-authenticated with fresh tokens minted and
      // should be able to perform sensitive operations like account
      // deletion and email or password update.
      // IdP data available in result.additionalUserInfo.profile.

      // Get the OAuth access token and ID Token
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
      const idToken = credential.idToken;
    })
    .catch((error) => {
      // Handle error.
    });
    auth_yahoo_reauth_popup.js

    API ที่ใช้เนมสเปซในเว็บ

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
firebase.auth().currentUser.reauthenticateWithPopup(provider)
    .then((result) => {
      // User is re-authenticated with fresh tokens minted and
      // should be able to perform sensitive operations like account
      // deletion and email or password update.
      // IdP data available in result.additionalUserInfo.profile.
      // Yahoo OAuth access token can be retrieved by calling:
      // result.credential.accessToken
      // Yahoo OAuth ID token can be retrieved by calling:
      // result.credential.idToken
    })
    .catch((error) => {
      // Handle error.
    });
    yahoo-oauth.js

ตรวจสอบสิทธิ์ด้วย Firebase ในส่วนขยาย Chrome

หากคุณกำลังสร้างแอปส่วนขยาย Chrome โปรดดู คู่มือเอกสารนอกหน้าจอ

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

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

  • สำหรับแอปของคุณ ทางที่แนะนำเพื่อให้ทราบถึงสถานะการตรวจสอบสิทธิ์ของผู้ใช้คือการตั้งค่าผู้สังเกตการณ์ในออบเจ็กต์ Auth จากนั้นคุณจะรับข้อมูลโปรไฟล์พื้นฐานของผู้ใช้ได้จากออบเจ็กต์ User โปรดดูหัวข้อจัดการผู้ใช้

  • ในกฎความปลอดภัยของ Firebase Realtime Database และ Cloud Storage คุณจะรับรหัสผู้ใช้ที่ไม่ซ้ำของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร auth ได้ และใช้รหัสดังกล่าวเพื่อควบคุมข้อมูลที่ผู้ใช้เข้าถึงได้

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

หากต้องการนำผู้ใช้ออกจากระบบ โปรดโทรหา signOut:

Web Modular API

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

API ที่ใช้เนมสเปซในเว็บ

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js