KakaoログインAPI JavaScriptを使用して実装します.

なぜログインAPIを使用するのか

なぜログインAPIを使用するのですか?

パスワードの暗号化、会員加入時の認証と暗号化などの登録と会員加入機能
注意すべき点が多いので、ログインと登録コストの代わりにログインAPIを使用します.
会員の管理を容易にする.

プレイヤーの立場では、会員加入プログラムが減少し、使用性が向上する.

優先パラメータ

スプリング起動

JQUERY

EL

式

JSTL

Kakaoログイン基本設定

KACAログインAPIの使い方はREST APIとJavaScript APIがありますが、私はWebバージョンでブラウザがJavaScriptをサポートしているのでJavaScriptバージョンを使って実現しています.
KAKAOを使用してAPIにログインするには、KAKAO DEVELOPERのWebサイトからアクセスキーを取得する必要があります.
https://developers.kakao.com/docs/latest/ko/kakaologin/js

アプリケーションを追加ココアapiアクセスキーを生成→流出nono(セキュリティ上の問題)

登録プラットフォームのWebサイトドメイン

リダイレクトURIの登録(restapiを使用する場合は登録が必要)

同意した項目を検査する
1.必要な同意(ユーザーが同意を選択した場合に使用可能)

KACAログインを実現します。

html

<!-- 로그인 모달창 -->
	<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
					<div class="d-flex justify-content-center">
						<a href="#" class="text-reset p-2" title="Tooltip">비밀번호 찾기</a> 
						<span class="p-2"> | </span> 
						<a href="registerUser" class="text-reset p-2" title="Tooltip">회원가입</a>
					</div>
				</div>
				<div class="modal-footer ">
	    		   <p>SNS 로그인</p>
		    		<div class="border p-3 mb-4 bg-light d-flex justify-content-between">
			    		<%-- 
			    			카카오 로그인 처리중 중 오류가 발생하면 아래 경고창에 표시된다.
			    			카카오 로그인 오류는 스크립트에서 아래 경고창에 표시합니다.
			    		 --%>
			    		<div class="alert alert-danger d-none" id="alert-kakao-login">오류 메세지</div>
						    		
		    			<a id="btn-kakao-login" href="kakao/login">
		  					<img src="//k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg" width="200" alt="카카오 로그인 버튼"/>
						</a>
		    		</div>
		    		<form id="form-kakao-login" method="post" action="kakao-login">
		    			<input type="hidden" name="email"/>
		    			<input type="hidden" name="name"/>
		    			<input type="hidden" name="img"/>
		    		</form>
				</div>
			</div>
		</div>
	</div>

jspでのJavaScript

$(function(){

	$("#btn-kakao-login").click(function(event){
		// a태그 기능 실행멈춤.
		event.preventDefault();
		// 카카오 로그인 실행시 오류메시지를 표시하는 경고창을 화면에 보이지 않게 한다.
		$("alert-kakao-login").addClass("d-none");
		// 사용자 키를 전달, 카카오 로그인 서비스 초기화.
		Kakao.init('본인 접근키 입력');
		// 카카오 로그인 서비스 실행하기 및 사용자 정보 가져오기.
		Kakao.Auth.login({
			success:function(auth){
				Kakao.API.request({
					url: '/v2/user/me',
					success: function(response){
						// 사용자 정보를 가져와서 폼에 추가.
						var account = response.kakao_account;
						
						$('#form-kakao-login input[name=email]').val(account.email);
						$('#form-kakao-login input[name=name]').val(account.profile.nickname);
						$('#form-kakao-login input[name=img]').val(account.profile.img);
						// 사용자 정보가 포함된 폼을 서버로 제출한다.
						document.querySelector('#form-kakao-login').submit();
					},
					fail: function(error){
						// 경고창에 에러메시지 표시
						$('alert-kakao-login').removeClass("d-none").text("카카오 로그인 처리 중 오류가 발생했습니다.")
					}
				}); // api request
			}, // success 결과.
			fail:function(error){
				// 경고창에 에러메시지 표시
				$('alert-kakao-login').removeClass("d-none").text("카카오 로그인 처리 중 오류가 발생했습니다.")
			}
		}); // 로그인 인증.
	}) // 클릭이벤트
})// 카카오로그인 끝.

kakao.auth.login(auth)を要求すると、有効時間が存在するトークンが与えられます.
そのurlが/v 2/user/meで会員を加入させる場合は、パスワード以外(パスワードはもちろん提供できません)、他の情報をcontrollerに送信してユーザー情報を追加することもできます.
つまり、登録ボタン一つで会員口座に入れます.
上のコードでは、email、ニックネーム、imgをインポートしてフォームに入れ、コントローラとしてコミットします.

Controller

	// kakao로그인 요청을 처리한다.
	@PostMapping("/kakao-login")
	public String loginWithKakao(KakaoLoginForm form){
		log.info("카카오 로그인 인증정보:"+ form);
		
		User user = User.builder()
					.email(form.getEmail())
					.name(form.getName())
					.img(form.getImg())
					.loginType(KAKAO_LOGIN_TYPE)
					.build();
		
		User savedUser = userService.loginWithKakao(user);
		
		// 저장된 회원정보가 없으면 전달받은 회원정보를 세션에 저장, 있으면 기존 정보 저장.
		if(savedUser != null) {
			SessionUtils.addAttribute("LOGIN_USER", savedUser);
		}else {
			SessionUtils.addAttribute("LOGIN_USER", user);
		}
		
		return "redirect:/";
	}

これらの伝達された情報をPOSTで受信し、これらの情報をuserオブジェクトに格納し、テーブルに同じemailがあるかどうかを確認し、存在する場合はsavedUserをセッションに保存する.
存在しない場合は、ユーザー情報をテーブル(サービス)に保存し、セッションに保存し、プライマリ・ロケーションに移動します.

ここは少し重要です!
loginTypeで通常のログイン名と区別します.

一般会員加入とKACA登録の脱退方式が異なり、KACA登録にはパスワード情報がないため、パスワード変更など一部のサービスを制限する必要があり、LoginTypeと区別する.

Service

	// 카카오 로그인
	public User loginWithKakao(User user) {
		User savedUser = userMapper.getUserByEmail(user.getEmail());
		if(savedUser == null) {
			userMapper.addUser(user);
		}
		return savedUser;
	}

会員情報が保存されているかどうかを確認する過程だ.

emailでフォームに会員情報を照会し、nullの値がある場合は新しい会員として保存します.

nullでなければ、保存したユーザー情報をそのまま返し、既存会員であることをお知らせします.