Social Login

Social Login💻

1.ソーシャル・ログインを行う主体:client/resourceowner/resourceserver

Client:一般ユーザーではなくソーシャルログインを使用するユーザー
=サービスを作成する「マイ」
resourceowner:ソーシャルログイン機能を提供するサービスを使用するユーザー
=お客様が受信したい情報の所有者
resource server:ソーシャルログイン機能を提供する場所
=clientが必要な実際のユーザーデータを持つ場所

2.ソーシャルログインFlow

1)ユーザがソーシャルログインボタンをクリックすると,ログインしたいソーシャルサイト(ココアまたはGoogle)のログインページに移動する.
2)この場合、サービスプロバイダがログインページにアクセスするために、サービスプロバイダとソーシャル・ネットワーク・サービスとの間でこのインタラクションが発生するため、サービスプロバイダは、OAuthという名前のサービスを事前に利用する.
3)ログインに成功した後、SNSはユーザーのページを以前使用したサービスページにリダイレクトする중개자의 역할을 가능하도록 해주는 서비스 **OAuth **=>ユーザーがソーシャルサイトにログインするとき、Authを通じて、ソーシャルサイトは「私」にAccess Tokenを提供し、「私」はこのトークンを通じてソーシャルサイトにアクセスし、ユーザーにログインページを提供します!!

3.ソーシャル・ログインの実施方法

1)登録
クライアント Resource Server 使用します. 登録が必要です!=
Google Developer、Naver Developerなどのサイト
登録完了後、 Client わあ. Resource Server 全部で3種類ある

Client ID

ID

は、私が実施するアプリケーションを識別するために使用される

Client Secret

PWは、私が実施するアプリケーションを識別します.
( 절대 코드에 노출되어지면 안되는 정보!!! = env 파일로 따로 관리해야함! )

Authorized Redirect URL

は、ソーシャルサービスに認証を付与する過程において、その認証コードを提供するパス

である.
2)認証
ログインする resource owner すなわち,データの所有者サービスユーザの承認が必要である.
ボタンを押すと、 リソース所有者 リソースサーバにログインしようとするウィンドウに移動

ログインした場合: ソーシャルサービス(リソースサーバ)がログインしようとしているリンクのクライアントIDをチェック

ログインしていない場合:ログインを続行

→ログイン完了後、ログインしようとしているリンクのリダイレクトURLを比較
- ソーシャルサービス(リソースサーバ)に対応するURLがない場合は、終了します.

などのURLがない場合は、  リソース所有者の個人情報 

クライアントに提供できるかどうかに関するメッセージ
→許可された場合、その応答 クライアントに送信します.

転送されたコンテンツ要求データの使用

サービスプロバイダ「マイ」がソーシャルサービスに接続されているときのアドレスリンクで、Authorizaion codeがclientID、clientsecret、redirect URLと一致していることを確認します.

一致すれば、ついにAccess Tokenを配布します

→リリースされたaccesstokenを使用する リソース所有者に関するデータをソーシャルサービス(resourceserver)から取得

// goole-oauth
import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { Strategy } from 'passport-google-oauth20';

@Injectable()
export class JwtGoogleStrategy extends PassportStrategy(Strategy, 'google') {
  constructor() {
    // 1. 검증부
    super({
      clientID: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      callbackURL: process.env.GOOGLE_CALLBACKURL,
      scope: ['email', 'profile'],
    });
  }

  // 2. 검증이 완료되면 실행
  validate(accessToken: string, resfreshToken: string, profile: any) {
    console.log(accessToken);
    console.log(resfreshToken);
    console.log(profile);
    return {
      // return 값은 context안의 request안 user로 들어감
      email: profile.emails[0].value,
      password: '1111',
      name: profile.displayName,
      phone: '01022222222',
      address: '주소없음',
    };
  }
}

// naver-oauth

import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { Strategy } from 'passport-naver-v2';

@Injectable()
export class JwtNaverStrategy extends PassportStrategy(Strategy, 'naver') {
  constructor() {
    // 1. 검증부
    super({
      clientID: process.env.NAVER_CLIENT_ID,
      clientSecret: process.env.NAVER_CLIENT_SECRET,
      callbackURL: process.env.NAVER_CALLBACKURL,
    });
  }

  // 2. 검증이 완료되면 실행
  validate(accessToken: string, resfreshToken: string, profile: any) {
    console.log(accessToken);
    console.log(resfreshToken);
    console.log(profile);
    return {
      // return 값은 context안의 request안 user로 들어감
      email: profile.email,
      password: '1111',
      name: profile.name,
      phone: profile.mobile,
      address: '주소없음',
    };
  }
}

//kakao-oauth
import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { Strategy } from 'passport-kakao';

@Injectable()
export class JwtKakaoStrategy extends PassportStrategy(Strategy, 'kakao') {
  constructor() {
    // 1. 검증부
    super({
      clientID: process.env.KAKAO_CLIENT_ID,
      clientSecret: process.env.KAKAO_CLIENT_SECRET,
      callbackURL: process.env.KAKAO_CALLBACKURL,
      scope: ['account_email', 'profile_nickname'],
    });
  }

  // 2. 검증이 완료되면 실행
  validate(accessToken: string, resfreshToken: string, profile: any) {
    console.log(accessToken);
    console.log(resfreshToken);
    console.log(profile);

    return {
      // return 값은 context안의 request안 user로 들어감
      email: profile._json.kakao_account.email,
      password: '1111',
      name: profile.username,
      phone: '01022222222',
      address: '주소없음',
    };
  }
}

=>各SNSの全体的な使い方は似ていますが、profileの内容が伝わる形が違うので、確認して正しく使う必要があります!
勉強して書いているブログ.
間違った内容があるかもしれませんが、もしあれば、メッセージを残してください.ありがとうございます.
😊