Naver,Kakao登録粉砕機🔥

完全なOAuthログイン方法

💻 Naverログインクライアント(レスポンス)コード

NAVERを使用してJDKにログインする方法

ログインページコンポーネント

import LoginNaver from './LoginNaver';

 <LoginNaver />

NAVERログインJDK使用ロジック

import React, { useEffect } from 'react';
import { naverClientId, naverRedirectURL, naverSecret } from '../../utils/OAuth';

const { naver } = window;

const LoginNaver = () => {
  const initializeNaverLogin = () => {
    const naverLogin = new naver.LoginWithNaverId({
      clientId: naverClientId,
      callbackUrl: naverRedirectURL,
      clientSecret: naverSecret,
      isPopup: false, // popup 형식으로 띄울것인지 설정
      loginButton: { color: 'green', type: 3, height: '60' }, //버튼의 스타일, 타입, 크기를 지정
    });
    naverLogin.init();
  };

  useEffect(() => {
    initializeNaverLogin();
  }, []);

  return <div id='naverIdLogin' />;
};

export default LoginNaver;

戻り値http//리다이렉트 설정 url ? access-token = {토큰값} & state = {스테이트 값} & token-type = {토근타입} & expire = {만료기간}

NAVERを使用してREST APIにログインする方法

aラベルにhttps://nid.naver.com/oauth2.0/authorize?response_type=code&client_id={클라이언트아이디}&state={임의값 사용}&redirect_uri={등록한 리다이렉트 URL}を入れてNAVER登録ページに入ります.その後、ログインが完了すると、設定したリダイレクトアドレスがURLにcode値とstate値を渡します.

📢 ここは重要なポイント!!

NAVER JDKを使用してクライアントにログインしている場合は、リモート・ログインに移行するトークンは使い捨てトークンではなく、すぐに使用できるアクセストークンです.
したがって、サーバは、ユーザプロファイル情報を直ちに要求することができる.
(これを知らなかったので、トークン配布トークンapiで起動したので大変でした…)
逆に、クライアントがREST APIを使用して要求する場合は、使い捨てトークンであるため、サーバは、そのトークンを再び使い捨てトークンとして発行し、プロファイル情報を使用してAPIを要求する必要がある.
NAVERログインJDKサーバ処理ロジック(Spring)

public void naverToken(String code, HttpServletResponse response) throws IOException {
    try {
        JSONParser jsonParser = new JSONParser();
        String header = "Bearer " + code;
        Map<String, String> requestHeaders = new HashMap<>();
        requestHeaders.put("Authorization", header);
        String responseBody = get(NAVER_USER_INFO_URI, requestHeaders);
        JSONObject parse = (JSONObject) jsonParser.parse(responseBody);

        JSONObject responseParse = (JSONObject) parse.get("response");
        String encodeUserName = (String) responseParse.get("name");
        String loginId = (String) responseParse.get("id");
        String email = (String) responseParse.get("email");
        String phoneNumber = (String) responseParse.get("mobile_e164");
        String userName = new String(encodeUserName.getBytes(StandardCharsets.UTF_8));
        User user = new UserRequest("social_" + loginId, userName, encode.encode("네이버"), email, phoneNumber).naverOAuthToEntity();
        if (userRepository.existsByLoginId(user.getLoginId()) == false) {
            userRepository.save(user);
        }
        String access_token = tokenProvider.create(new PrincipalDetails(user));
        response.addHeader("Authorization", "Bearer " + access_token);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

💻 Kakaoログインクライアント(レスポンス)コード

我々はREST APIのみを用いてKACOを実装し,その位置付けのみを行う.
KACAREST APIクライアント使用ロジック

// 변수처리를 위한 다른 JS 파일
export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${kakaoClientId}&redirect_uri=${kakaoRedirectURL}&response_type=code&prompt=login`;

// 로그인 페이지 해당 코드
<KakaoBtn href={KAKAO_AUTH_URL}>
  <img src={`${process.env.PUBLIC_URL}/images/kakao_login_large_narrow.png`} alt='kakaoLogin' />
</KakaoBtn>

戻り値http//리다이렉트 설정 url?code={일회성 토큰값}ログイン要求時にurlに他のstate値を入れなかった場合、state値はオプションでスキップされません.ファイルを見て混同しないでください.

📢 ここは重要なポイント!!

このセクションではREST APIが使用されるため、使い捨てトークンはクライアントに移行します.したがって、トークンはサーバ上で正式なトークンを再度発行し、受信したaccess-tokenを使用してユーザープロファイルクエリーAPIを起動する必要があります.これにより、エラーは発生しません.
また、contentTypeが正しいことを確認してください!
私の場合、ContentType -> application/jsonに勝手にjsonリクエストを送信しました.org.springframework.web.client.HttpClientErrorException$Unauthorized: 401 Unauthorized: [no body] 上記のエラーが発生しましたので、ぜひ!!
ContentTypeはapplication/x-www-form-urlencoded;charset=utf-8公式文書に従って申請してください!
KACAログインJDKサーバ処理ロジック(Spring)

public void kakaoToken(String code, HttpServletResponse res, HttpSession session) {
    RestTemplate rt = new RestTemplate();
    HttpHeaders headers = new HttpHeaders();
    headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
    MultiValueMap<String, String> accessTokenParams = accessTokenParams("authorization_code",KAKAO_CLIENT_ID ,code,KAKAO_REDIRECT_URI);
    HttpEntity<MultiValueMap<String, String>> accessTokenRequest = new HttpEntity<>(accessTokenParams, headers);
    ResponseEntity<String> accessTokenResponse = rt.exchange(
            KAKAO_TOKEN_URI,
            HttpMethod.POST,
            accessTokenRequest,
            String.class);
    try {
        JSONParser jsonParser = new JSONParser();
        JSONObject jsonObject = (JSONObject) jsonParser.parse(accessTokenResponse.getBody());
        session.setAttribute("Authorization", jsonObject.get("access_token"));
        String header = "Bearer " + jsonObject.get("access_token");
        System.out.println("header = " + header);
        Map<String, String> requestHeaders = new HashMap<>();
        requestHeaders.put("Authorization", header);
        String responseBody = get(KAKAO_USER_INFO_URI, requestHeaders);

        JSONObject profile = (JSONObject) jsonParser.parse(responseBody);
        JSONObject properties = (JSONObject) profile.get("properties");
        JSONObject kakao_account = (JSONObject) profile.get("kakao_account");

        Long loginId = (Long) profile.get("id");
        String email = (String) kakao_account.get("email");
        String userName = (String) properties.get("nickname");
        User kakaoUser = new UserRequest("social_" + loginId, encode.encode("카카오"), userName, email).kakaoOAuthToEntity();
        if (userRepository.existsByLoginId(kakaoUser.getLoginId()) == false) {
            userRepository.save(kakaoUser);
        }
        String access_token = tokenProvider.create(new PrincipalDetails(kakaoUser));
        res.setHeader("Authorization", "Bearer "+access_token);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

再三注意する

ログインページに移動できない場合は、NAVER、KACA開発者ページで、開発中のクライアントアドレス(http//localhost:3000など)

がアプリケーションドメインサービスURLに含まれているかどうかを確認します.

サーバでエラーが発生した場合は、必要なparam値が漏れていないかどうかを確認します.

401エラーが発生した場合は、contentTypeが正しいかどうか、または秘密値を追加するためにセキュリティ設定を追加する必要があるかどうかを確認します.

結局全てがセットされていて、使っていれば問題ないのですが・・・✨

🔗 リファレンス

OAuthロジック写真を参照してください