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

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

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

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

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

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

      โปรดเลือกสิทธิ์ 2 อย่างของ OpenID Connect API ดังนี้ profile และ email

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

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

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

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

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

    Web

    import { OAuthProvider } from "firebase/auth";

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

    Web

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

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

    Web

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

    Web

    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 APIs คุณจะ ต้องขอสิทธิ์ไปยัง Yahoo APIs ในสิทธิ์ API ใน Yahoo Developer Console ขอบเขต OAuth ที่ขอต้องตรงกับ รายการที่กำหนดไว้ล่วงหน้าในสิทธิ์ API ของแอป เช่น หากอ่าน/เขียน มีการขอสิทธิ์เข้าถึงรายชื่อติดต่อของผู้ใช้และกำหนดค่าล่วงหน้าใน API ของแอป ต้องส่งผ่าน sdct-w แทนขอบเขต OAuth แบบอ่านอย่างเดียว sdct-r มิฉะนั้น ขั้นตอนนี้จะล้มเหลวและระบบจะแสดงข้อผิดพลาด ผู้ใช้ปลายทาง

    Web

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

    Web

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

      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

      Web

      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

      firebase.auth().signInWithRedirect(provider);

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

    Web

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

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

    Web

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

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

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

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

    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

    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

    Web

    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

    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

    Web

    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

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

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

Web

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