[Node.js]KACAソーシャルログインの実現

実戦プロジェクトを行い,ユーザの利便性のために登録/会員加入方式をKACAソーシャル登録に反映することを決定した.
SNS登録を実現するために、OAuthとは何かを知っておけば良いのですが、OAuthとは何かを知らなければ、文章を読みに行きましょう!
OAuth 2.0とは?

KakaoSocialログイン認証方法

KakaoSocialログインだけでなく、ソーシャルログインも上記のように行われています.
クライアントがKACAから送信されたaccess tokenをサーバに送信すると、サーバは、送信されたaccess tokenの検証をKACAに再度要求する.Kakaoサーバが自分がクライアントに送ったトークンをサーバから受け取ったトークンと同じものとすると,ユーザ情報が提供される.

KaKao Developerに登録

まず、KACAソーシャルログインを実現するためには、KACA開発者アカウントとログインリファレンスアプリケーションの登録が必要です

下記のリンクでお申し込みいただけます
KaKao Developers

申請後、アプリケーション鍵が自動的に発行されます。これらの鍵は露出できません。露出したら、再発行しなければなりません

環境変数としてリリースされたREST API鍵を登録

KaKao開発者のWebサイトにログインし、アプリケーションを追加する必要があります。

アプリケーション名に進行中のプロジェクト名を記入すればいいです。

Webプラットフォームをプラットフォームに登録します。

サイトのドメイン名にhttp://localhost:3000を登録しました

Kakaoログインをアクティブにし、Redirect URIを登録します。

これは,KACAサーバからどのアドレスにREST API GETリクエストを送信するかを書く.사용하고자 하는 주소/auth/kakao/callbackこの組み合わせでいいです
後でフロントとRedirect URIに対して、今登録したこの住所に着くことができます!

同意項目の部分では、プレイヤーから得るべき情報を設定することができます.
この項目が設定されており、ユーザー登録時に同意書を処理する
Kakaoの登録を実現するために、Kakao開発者が登録する必要があるものはここまでです.
コードで実現しましょう.
まず、passportモジュールを使ってKACASOのソーシャルログインを実現するので、モジュールをインストールしておきましょう.

npm i passport passport-kakao -S

インデックスを含むpassportというフォルダを、進行中のプロジェクトに作成します。jsファイルを作成する

index.jsファイルでは、次のようになります.

const passport = require('passport');
const KakaoStrategy = require('passport-kakao').Strategy;
const { User } = require('../models');

module.exports = (app) => {
    app.use(passport.initialize()); // passport를 초기화 하기 위해서 passport.initialize 미들웨어 사용
    passport.use(
        new KakaoStrategy({
            clientID: process.env.KAKAO_ID, // 카카오 로그인에서 발급받은 REST API 키
            callbackURL: process.env.KAKAO_URL, // 카카오 로그인 Redirect URI 경로
        },
        // clientID에 카카오 앱 아이디 추가
        // callbackURL: 카카오 로그인 후 카카오가 결과를 전송해줄 URL
        // accessToken, refreshToken : 로그인 성공 후 카카오가 보내준 토큰
        // profile: 카카오가 보내준 유저 정보. profile의 정보를 바탕으로 회원가입
        async (accessToken, refreshToken, profile, done) => {
            try {
                const exUser = await User.findOne({
                    // 카카오 플랫폼에서 로그인 했고 & snsId필드에 카카오 아이디가 일치할경우
                    where: { snsId: profile.id, /*providerType: 'kakao'*/ },
                });
                // 이미 가입된 카카오 프로필이면 성공
                if (exUser) {
                    done(null, exUser); // 로그인 인증 완료
                } else {
                    // 가입되지 않는 유저면 회원가입 시키고 로그인을 시킨다
                    const newUser = await User.create({
                        email: profile._json && profile._json.kakao_account_email,
                        nickname: profile.displayName,
                        snsId: profile.id,
                        providerType: 'kakao',
                    });
                    done(null, newUser); // 회원가입하고 로그인 인증 완료
                }
            } catch (error) {
                console.error(error);
                done(error);
            }
        },
        ),
    );
    passport.serializeUser((user,done)=>{ 
        done(null,user);
    });
    passport.deserializeUser((user,done)=>{
        done(null,user);
    });
};

ClientIDには、先ほど受信したREST APIキーが含まれています.
callback URLにはRedirect URIで登録されたURI(KACAから認証結果を受信するルータアドレス)が含まれています.
ClientIDとcallback URLは、露出を防ぐために.envファイルに格納されます.

routes/user.jsファイルにルータを作成する

const express = require('express');
const router = express.Router();
const passport = require('passport');
const userController = require('../controller/user');


router.get('/kakao', passport.authenticate('kakao'));
router.get('/kakao/callback', userController.kakaoCallback);


module.exports = router;

ルータアプリケーションを作成します。jsに関連付ける

const passportConfig = require('./passport');

passportConfig(app);


const userRouter = require('./routes/user');

app.use('/auth', [userRouter]);

app.jsとルータを接続すると,サーバ上のKakao登録認証が実現する.
サーバを実行し、登録したRedirect URIに接続してログインすると、コンソールの値がよく表示されます.
https://sangminlog.tistory.com/entry/kakao-login
https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-Passport-%EA%B5%AC%ED%98%84