第二編ココアソーシャルログイン実現(認証コード付きコイン受領)

上のコード(wecode)サブプロジェクト

クリーム(https://kream.co.kr/)クローンコード

KACAソーシャルログイン機能

社会登録機能という大きな目標を達成するために,機能単位で目標を再分割した.

第1段階:KACAからSucreamに送信された認証コードを受け取る.

第2段階:Sucreamで認証コードを再利用してKakaoにトークンを要求する.

ステップ

3:お客様の通貨をココアからバックエンド

に戻します.
ステップ

第4ステップ:受信タグをローカルストレージに保存し、別のページ

に移動する

[2段階]：KACAから受け取った認証コードでKACAにトークンを要求する

認証コードを受け取りましたが、これを持ってどうやって再びKakaoにリクエストしてTokenを受けに来たのか、長い時間をかけてGoogle検索をして理解できず、最後に指導者に質問して説明を聞いてようやく実現しました.

問:どのようにコードを抽出して管理しますか?🔍

kakaoに登録したリダイレクトURLで、承認コード(コード部分に含まれる)を同時に送信します.このURLから承認コードを抽出するためにGoogleを使い、URL SearchParamsを書けばいいというヒントを得て、mdn公式ドキュメントを調べました.これにより、以下のコードが作成されます.これによりコード部分のみが抽出され,承認コードのみがうまく確認できる.

const Login = () => {
  let params = new URLSearchParams(document.location.search);
  let code = params.get('code');
  console.log(code); 
  
  ...
  
  }

2つ目の質問:このような認証コードを受け取って、どのようにKAKAにコインを申請しますか?🔍

結局、TALKENを貰おうとするとKACAからの認証コードをKACAサーバーに再送信することになりますが、この方法はKACA公式ページに上記の内容が書かれています.しかし、問題は、私がそれを読んでも、私はそれを理解する能力がありません.「目が見えない」というのが私の意味です.最後にこの点を理解するために、私は同級生と指導者に問題を提出して、彼らの説明のおかげで、私はやっと私の知らないところを知って学んだ.fetchについてはよく理解できず、googlingなどでコードを実装しただけで、結果的に他のものに適用できず、問題が発生しました.

最終的には上記のようにKACAサーバにデータを要求する.公式文書にはurlと各パラメータ、および対応する値が親切にリストされています.このように編成されたコードは以下の通りである.最初はasyncで非同期を処理しjsonを送信したが成功しなかった.Googleが検索したところ、何人かがqs(クエリーリスト)で起動していることがわかり、qsnpmをダウンロードしてqsで転送すると、書き直したことが確認され、無事にコインが届いた.

const getToken = async () => {
    try {
      await fetch('https://kauth.kakao.com/oauth/token', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
        },
        body: qs.stringify({
          grant_type: 'authorization_code',
          client_id: restApiKey,
          redirect_uri: redirectUrl,
          code: code,
          client_secret: clientSecret,
        }),
      })
        .then(res => res.json())
        .then(data => console.log(data));
    } catch (err) {
      console.error(err);
    }
  };
  
  useEffect(() => {
    getToken();
  });

私個人の気持ち

人は自分の意図通りにこのような問題を解決するたびに、純粋な喜びを感じています.このような喜びのため、人々は開発が面白いことを理解した.

公式文書を見てもよく理解できないことに気づきました.用語の意味を本当に理解していないからです.ハングルで公式文書を読んでも、単語の多くの意味が理解できず、コードに変換できないということだ.最終的には、コードだけでなく、どんな面白いことでもよくしなければなりません.よくするには豊富な知識と経験が必要です.そして、より多くの知識と経験を積むには、最終的には多くの努力と時間を費やすしかない.

最終的に本格的な開発者になるには、正式な文書を見て、正しく理解し、開発しなければならない.グーグルでコードをあちこち書くことができないことを改めて学んだだけです.

-参考資料

[ココ公式ファイル]
https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api
[MDNのURL SearchParams.get()
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/get
[MDNの使用Fetch]
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch
[反応公式ドキュメント]
https://ko.reactjs.org/docs/hooks-effect.html
[npm qs]
https://www.npmjs.com/package/qs