๐Ÿ’ป My Work/๐Ÿ”ฅ React

[React] Firebase Authentication REST API - refresh Token์œผ๋กœ restAPI ์š”์ฒญํ•ด์„œ ์žฌ๋ฐœ๊ธ‰๋œ Id Token์–ป๊ธฐ(fetch๋กœ API ์š”์ฒญํ•˜๊ธฐ)

Jaeseo Kim 2022. 9. 30. 23:57

https://firebase.google.com/docs/reference/rest/auth#section-refresh-token

 

Firebase ์ธ์ฆ REST API

FirebaseVisionOnDeviceAutoMLImageLabelerOptions

firebase.google.com

์ด๋Ÿฐ ์ง“์„ ํ•˜๊ฒŒ ๋œ ๋ฐฐ๊ฒฝ

  1. ์ต๋ช… ์œ ์ €๋กœ ์„œ๋น„์Šค๋ฅผ ์ฆ๊ธด๋‹ค.(์˜ˆ๋ฅผ ๋“ค์–ด, ํ€ด์ฆˆ ์‚ฌ์ดํŠธ์ธ ๊ฒฝ์šฐ์— ๋ฌธ์ œ๋ฅผ 100๊ฐœ ํ‘ผ ๊ฒฝ์šฐ)
    - ํ˜„์žฌ Auth: ์ต๋ช… ์œ ์ €
    -> ์ต๋ช… ํ† ํฐ refresh ๊ฐ€๋Šฅ
  2. ๋กœ๊ทธ์ธ์„ ํ•œ๋‹ค. 
    - ํ˜„์žฌ Auth: ๋กœ๊ทธ์ธ ์œ ์ €
    -> ์ต๋ช… ํ† ํฐ refresh ๋ถˆ๊ฐ€๋Šฅ(ํ˜„์žฌ Auth๋Š” ๋กœ๊ทธ์ธ ์œ ์ €ํ•œํ…Œ ์žˆ์œผ๋‹ˆ๊นŒ)
    -> ๊ทธ๋Ÿผ ์ต๋ช… ํ† ํฐ refresh๋Š” ์–ด๋–ป๊ฒŒ ํ•ด์ฃผ์ง€?!?!?
  3. ๋กœ๊ทธ์•„์›ƒ์„ ํ•œ๋‹ค.
  4. ๋‹ค์‹œ ์ต๋ช… ์œ ์ €๋กœ ๋Œ์•„์˜จ๋‹ค.
    -> ์ด๋•Œ, ์ต๋ช… ์œ ์ €๋กœ ํ–ˆ๋˜ ๋ฌธ์ œ 100๊ฐœ๋ฅผ ์–ต์šธํ•˜๊ฒŒ ๋‚ ๋ฆด ์ˆœ ์—†๋‹ค! ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์ฃผ์ž!

p.s. ๊ธฐ๋ก๋“ค์„ ์—ฐ๋™ํ•ด์ฃผ๋ฉด ์•ˆ๋˜๋‚˜? ์ด๋ฏธ ๋กœ๊ทธ์ธ์„ ํ•œ ์œ ์ €๋Š” ํšŒ์›๊ฐ€์ž… ์‹œ์— ์ต๋ช…์œ ์ €์ผ ๋•Œ์˜ ๊ธฐ๋ก์„ ์ด๋ฏธ ์—ฐ๋™ํ•ด๋ฒ„๋ ธ๊ธฐ ๋•Œ๋ฌธ์— ์•ˆ ๋˜๋„๋ก ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.

 

์ฃผ์ ˆ์ฃผ์ ˆ...

 

โœจ  โœจ
๊ทธ๋ž˜์„œ ์ €๋Š” Exchange renewal tokens for ID tokens ์„ ์‚ฌ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.
โœจ

 

 

00. ๊ทœ์น™


 

request, response ํ˜•์‹

fetch(
    "https://securetoken.googleapis.com/v1/token?key=" +
      process.env.REACT_APP_FIREBASE_API_KEY,
    {
      crossDomain: true,
      method: "POST",
      headers: { "content-type": "application/x-www-form-urlencoded" },
      body: "grant_type=refresh_token&refresh_token=" + refresh_token,
    }
  )
    .then((response) => console.log("๋ฆฌํ”„๋ ˆ์‹œ ๋ฐ›์•˜๋‹ค!", response.json()))
    .catch((error) => console.error(error));

์„œ๋ฒ„์— ์š”์ฒญํ•˜๊ธฐ ์œ„ํ•ด, ์œ„์™€ ๊ฐ™์€ ์ฝ”๋“œ๊ฐ€ ํ•„์š”ํ•œ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๊ฒ ๋„ค์š”.

process.env.REACT_APP_FIREBASE_API_KEY ์€ ๋ณธ์ธ์˜ firebase ํ”„๋กœ์ ํŠธ์—์„œ ๋”ฐ๋กœ ์„ค์ •ํ•˜์—ฌ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

๐Ÿ“Œ ์ฐธ๊ณ  : https://avoc-o-d.tistory.com/50?category=1069902  

 

refresh_token ์€ ๋กœ๊ทธ์ธํ•  ๋•Œ ํ˜น์€ ํšŒ์›๊ฐ€์ž…ํ•  ๋•Œ ๋ณธ์ธ์ด ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅํ•ด๋†“์€ ๋ฆฌํ”„๋ ˆ์‹œ ํ† ํฐ์„ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

๐Ÿ“Œ ์ฐธ๊ณ  (๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅํ•˜๋Š” ๋ฐฉ๋ฒ•) : https://avoc-o-d.tistory.com/53?category=1069902 

 

์˜ˆ์‹œ request, response

 

์—๋Ÿฌ ์ฝ”๋“œ

 

01. fetch๋กœ API ์š”์ฒญํ•˜๊ธฐ


์ €๋Š” ๋ฆฌ๋•์Šค๋ฅผ ํ†ตํ•ด state๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ํด๋”๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์ €์žฅํ–ˆ์Šต๋‹ˆ๋‹ค.

 

src/modules/_actions/getSecureToken.js

async function getSecureToken(params = {}) {
  fetch(
    "https://securetoken.googleapis.com/v1/token?key=" +
      process.env.REACT_APP_FIREBASE_API_KEY,
    {
      crossDomain: true,
      method: "POST",
      headers: { "content-type": "application/x-www-form-urlencoded" },
      body: "grant_type=refresh_token&refresh_token=" + params.refresh_token,
    }
  )
    .then((response) => console.log("๋ฆฌํ”„๋ ˆ์‹œ ๋ฐ›์•˜๋‹ค!", response.json()))
    .catch((error) => console.error(error));
}

export default getSecureToken;

 

ํ† ํฐ์„ ์žฌ๋ฐœ๊ธ‰ ๋ฐ›์œผ๋ ค๋Š” ๊ณณ์˜ ์ฝ”๋“œ๋ฅผ ๋ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

  /**
   * ์ต๋ช…์˜ refresh-token์„ ์ธ์ž๋กœ postํ•˜์—ฌ
   * ํ† ํฐ์„ ์žฌ๋ฐœ๊ธ‰ ๋ฐ›์ž.
   */
  async function refreshToken() {

....

    const guestRefreshToken = await localStorage.getItem("guest-refresh-token");

....

    let body = {
      refresh_token: guestRefreshToken,
    };
    
...

	await getSecureToken(body)
        .then((res) => {
          console.log("์ต๋ช… ํ† ํฐ ๋ฆฌํ”„๋ ˆ์‹œ ์„ฑ๊ณต!!!", res);
          // ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์— ์žฌ๋ฐœ๊ธ‰ํ•œ ํ† ํฐ๊ณผ refresh ํ† ํฐ ์ €์žฅํ•˜๊ธฐ
          
        })
        .catch((err) => {
          console.log("์ต๋ช… ํ† ํฐ ๋ฆฌํ”„๋ ˆ์‹œ ์—๋Ÿฌ", err);
        });
        
...

}

 

ํ•˜ํ•ซ..โœจโœจ