ตรวจสอบสิทธิ์โดยใช้ 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

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

try {
  // Step 1: User tries to sign in using Yahoo.
  let result = await signInWithPopup(getAuth(), new OAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Yahoo credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Yahoo credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

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

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

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

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

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

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

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

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

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

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

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