Jun 개발노트

JWT

January 16, 2020

JWT Setting 및 소셜 로그인 연동방법(FACEBOOK, google, github)

  1. JWT란?
    JSON Web Token (JWT) 은 웹표준 (RFC 7519) 으로서 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인 (self-contained) 방식으로 정보를 안전성 있게 전달해줍니다.
  2. 사용이유

    • 다양한 소셜 로그인 연동 및 쉬운 사용법
    • JWT Quick Start를 통해서 쉽게 구현
    • 비밀번호 찾기(문자와 이메일)와 이중 인증 또한 가능
  3. 각 소셜로그인 리다이렉트 url 설정

    • 구글

      • 사용자 인증정보 -> OAuth 2.0 클라이언트 ID -> 승인된 리디렉션 URL
      • url : https://dev-qfyt47dg.auth0.com/login/callback
      • OAuth 동의 화면 -> 승인된 도메인
      • url : auth0.com
    • 페이스북

      • 설정 -> 기본설정 -> 앱도메인
      • url : https://dev-qfyt47dg.auth0.com
      • Facebook 로그인 설정 -> 유효한 OAuth 리디렉션 URI
      • url : https://dev-qfyt47dg.auth0.com/login/callback
    • 깃허브

      • OAuth Apps -> Homepage URL
      • url : https://dev-qfyt47dg.auth0.com/
  4. 추가할 파일

    1. auth_config.json
    {
        "domain": "dev-qfyt47dg.auth0.com",
        "clientId": "*********"
    }
    1. react-auth0-spa.js
    // src/react-auth0-spa.js
    import React, { useState, useEffect, useContext } from "react";
    import createAuth0Client from "@auth0/auth0-spa-js";
    
    const DEFAULT_REDIRECT_CALLBACK = () =>
        window.history.replaceState({}, document.title, window.location.pathname);
    
    export const Auth0Context = React.createContext();
    export const useAuth0 = () => useContext(Auth0Context);
    ..........

Written by Junho You 배운것을 기록하자