Github Login #02

46243 ワード
mongoose mongodb node.js user:email scope read:user JavaScript github テキストリンク

GitHubログインの継続


今回の部分で見るのはscopeです.scopeは、プレイヤーからどれだけの情報を読み取り、どのような情報をもたらすかについてです.
だから、私たちはもちろん必要な情報だけを提供するように要求しなければなりません.
https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps
例えば、ここに示すscopeのすべては、ここからadmin scopeを取得することができる.
どういう意味ですか?読み書きorganizationまたはpublic keyに近いです
管理可能public key、使用可能public keypublic keyなど読むことができ、種類が多い.
または、notificationのすべてに対してwatch/unwatchに近づくことができる.userもそうです.userのプロフィールから読み書きすることもできます.
あなたが何を望んでいるかによって決まります.writeは必要ありません.readだけでいいです.packageを読む必要もなく、gpg_keyを読む必要もありません.
あなたが望んでいるのはuserを読むことができて、userのemailを持ってきます.
あなたが欲しいのはこれです.read:userおよびuser:email.
では早速応用を始めましょう
ここには非常に長いURLが見えます.
block content 
    if errorMessage
        span=errorMessage
    form(method="POST")
        input(placeholder="Username",name="username", type="text", requeired)
        input(placeholder="Password",name="password", type="password", requeired)
        input(type="submit", value="Login")
        br
        a(href="https://github.com/login/oauth/authorize?client_id=2c44ee26963db98266d4&allow_signup=false") Continue with GitHub →
だからもう一つ追加します.
このpermissionはscopeとも呼ばれ、ここでは空白のscopeリストを送信する.
例としては、user:emailから始まる.
block content 
    if errorMessage
        span=errorMessage
    form(method="POST")
        input(placeholder="Username",name="username", type="text", requeired)
        input(placeholder="Password",name="password", type="password", requeired)
        input(type="submit", value="Login")
        br
        a(href="https://github.com/login/oauth/authorize?client_id=2c44ee26963db98266d4&allow_signup=false&scope=user:email") Continue with GitHub →
正常に動作しているかどうかを確認することにします.更新してContinue with GitHubをクリック
以前とは違うように見えます.現在はPersonal user dataと明示されている.
またはurlからuserに変更されます.
https://github.com/login/oauth/authorize?client_id=2c44ee26963db98266d4&allow_signup=false&scope=user
では、今ではPersonal dataが近づくことができます.
読み書きなどあらゆる方法が可能です.そんなに多くは必要ありません.
最終的にはこのscope parameterによって変わります.
つまり、GitHubとの会話では、「こういう情報が欲しい」ということになります.
要求された情報に従って、userが承認され、GitHubが情報にアクセスするためにtokenを提供する.
ご覧のように、すべてURLに基づいています.
KakaoTalkの登録が実現したときも同じことをします.
KakaoTalkから与えられたURLを受け、KakaoTalkから与えられたIDを入れ、scopeを入れた.
あなたが要請したいものを含むAPIファイルがあります.read:userを見て
ここにread:userを置きます
https://github.com/login/oauth/authorize?client_id=2c44ee26963db98266d4&allow_signup=false&scope=read:user
では適用します.Personal user dataと表示されます.
もう一つ追加スペースで仕切ればいいです.コピーuser:emailここに空白とuser:emailを入れます.
https://github.com/login/oauth/authorize?client_id=2c44ee26963db98266d4&allow_signup=false&scope=read:user%20user:email emailの住所と履歴書情報がほしいと言われています.Email addresses (read-only), profile information (read-only)もっと要求することもできます.そしてこれらはすべてURLにスペースで区切って書けばいいです.
他にもやってみよう今回はdelete_repoを入れます.
https://github.com/login/oauth/authorize?client_id=2c44ee26963db98266d4&allow_signup=false&scope=read:user%20user:email%20delete_repo
空白を入れ、delete_repoを入れます.ご覧のように、delete repoが追加されました.
これでプレイヤーは「はい/いいえ」になります.
ここでは、「このアプリケーションはrepositoryを削除することができます.」This application will be able to delete any repository to which you have admin rights.これはあまりよく見えません.以前にも見たことがありますが、URL賞を受賞するように要求されたものはすべて中に入っています.
1つの問題は、勝ったURLを修正し続けることです.ご覧の通り、長すぎます.
次に、GitHubと同じURLがほしいとします.
これをJoinに入れると言ったら、これを全部貼り付けます.scopeを交換しても交換し、クライアントIDを交換してもtemplateを交換します.
だからすべてのものを一つの場所に置いたほうがいいです.もちろん、このように書くと非常に複雑で混乱します.
このように交換します.
block content 
    if errorMessage
        span=errorMessage
    form(method="POST")
        input(placeholder="Username",name="username", type="text", requeired)
        input(placeholder="Password",name="password", type="password", requeired)
        input(type="submit", value="Login")
        br
        a(href="/users/github/start") Continue with GitHub →
"/users/github/start"そうですしかも、まだrouteはないので、新しいrouteを製造します.user.Router.jsから/usersはすでにありますが、どうでもいいです./githubを加えます.
userRouter.get("/logout", logout);
userRouter.get("/edit", edit);
userRouter.get("/remove", remove);
userRouter.get("/github/start", startGithubLogin);
userRouter.get(":id", see);
なお、これはstartGithubLoginというcontrollerを使用している.
でもまだcontrollerは作られていないので作ります.userController.jsから
export const startGithubLogin = (req, res) => {}
export const edit = (req, res) => res.send("Edit User");
export const remove = (req, res) => res.send("Remove User");
export const logout = (req, res) => res.send("Log out");
export const see = (req, res) => res.send("See User");
そしてこれはuserControllerのこの位置に置かれます.
では、userControllerをimportに変えることができます.userRouter.jsから
import express from "express";
import {
  edit,
  remove,
  logout,
  see,
  startGithubLogin,
} from "../controllers/userController";
const userRouter = express.Router();

userRouter.get("/logout", logout);
userRouter.get("/edit", edit);
userRouter.get("/remove", remove);
userRouter.get("/github/start", startGithubLogin);
userRouter.get(":id", see);

export default userRouter;
importをあげました.今はURLがあります.このURLはuserをGithubに変えました.redirectを予約します.このURLをもっときれいにします.user.controller.jsから
export const startGithubLogin = (req, res) => {
  const baseUrl = "https://github.com/login/oauth/authorize";
ここはstartGithubLogin何をしますか?URLを除いて全部authorizeしか入れません
次にconst clienIDを入れます.
export const startGithubLogin = (req, res) => {
  const clientId = "2c44ee26963db98266d4";
  const baseUrl = "https://github.com/login/oauth/authorize";
これらを合わせるとURLになります.
その前にlogin.pugで
block content 
    if errorMessage
        span=errorMessage
    form(method="POST")
        input(placeholder="Username",name="username", type="text", requeired)
        input(placeholder="Password",name="password", type="password", requeired)
        input(type="submit", value="Login")
        br
        a(href="/users/github/start") Continue with GitHub →
これでURLと書きます.
次に、allow_signup = falseおよびuser:emailscopeが必要である.
export const startGithubLogin = (req, res) => {
  const config = {
    clientId :"2c44ee26963db98266d4",
    allow_signup : false,
    scope: "read:user user:email",
  }
  const baseUrl = "https://github.com/login/oauth/authorize";
};
だからconfig対象を作ります.clientIdをオブジェクトに入れます.allow_signup = falsescopeは、いくつかのscopeを送信する.
どちらのscopeを使うとread:userとuser:emailです.

必ず空白に分けなければならない。


これはconfiguration客体です.URLに変更しました.
あるいは、この符号化をURLにしてもよい.UrlSearchParamsというutilityを書きます
export const startGithubLogin = (req, res) => {
  const config = {
    clientId :"2c44ee26963db98266d4",
    allow_signup : false,
    scope: "read:user user:email",
  };
  URLSearchParams 
  const baseUrl = "https://github.com/login/oauth/authorize";
};
ブラウザでテストすることもできます.テストしてみます.inspectに入ります(検査)consoleからこのconfigオブジェクトをコピーします.
 const config = {
    clientId :"2c44ee26963db98266d4",
    allow_signup : false,
    scope: "read:user user:email",
  };
undefined
new URLSearchParams(config)
URLSearchParams {}[[Prototype]]: URLSearchParams
new URLSearchParams(config).toString()
'clientId=2c44ee26963db98266d4&allow_signup=false&scope=read%3Auser+user%3Aemail'
new URLSearchParams(config)をして、もちろん何も生まれません.
ただし、new URLSearchParams(config).toString()に接続できます.
これでこれらを手に入れたが、符号化された.
今からまた帰ります.
export const startGithubLogin = (req, res) => {
  const config = {
    clientId :"2c44ee26963db98266d4",
    allow_signup : false,
    scope: "read:user user:email",
  };
  const params = new URLSearchParams(config);
  const baseUrl = "https://github.com/login/oauth/authorize";
};
ここから、何か起動しないものがあります.clientId variableを作ってあげたからです.
これはGithubが待つのとは違います.Github名前の通りclient_idを待っています
したがって、javascript賞においても、Githubが希望するparameterに送信される.
export const startGithubLogin = (req, res) => {
  const config = {
    client_id :"2c44ee26963db98266d4",
    allow_signup : false,
    scope: "read:user user:email",
  };
  const params = new URLSearchParams(config);
  const baseUrl = "https://github.com/login/oauth/authorize";
};
configもあります.parameter度作られています.base URlもあります.
今何をするのか、ここで見たように.
 const config = {
    clientId :"2c44ee26963db98266d4",
    allow_signup : false,
    scope: "read:user user:email",
  };
undefined
new URLSearchParams(config)
URLSearchParams {}[[Prototype]]: URLSearchParams
new URLSearchParams(config).toString()
'clientId=2c44ee26963db98266d4&allow_signup=false&scope=read%3Auser+user%3Aemail'
それらを全部URLに入れなければなりません.また帰ります.
export const startGithubLogin = (req, res) => {
  const config = {
    client_id :"2c44ee26963db98266d4",
    allow_signup : false,
    scope: "read:user user:email",
  };
  const params = new URLSearchParams(config).toString();
  const baseUrl = `https://github.com/login/oauth/authorize?${params}`;
  return res.direct(baseUrl);
};
toString()と書いて、次に?を加えます.そしてqueryにparameterを入れます
そして${params}と書きます.こうしてURLが完成しました.
しかし、その前にreturn res.direct()をあげて、baseUrlに行かせます.
実はbaseURLには行けません.baseURlは${params}の部分です.
export const startGithubLogin = (req, res) => {
  const baseUrl = "https://github.com/login/oauth/authorize";
  const config = {
    client_id: "2c44ee26963db98266d4",
    allow_signup: false,
    scope: "read:user user:email",
  };
  const params = new URLSearchParams(config).toString();
  const finalUrl = `${baseUrl}?${params}`;
  return res.redirect(finalUrl);
};
このように修正しなければ打たれない.finalUrlだそうです.では今userはfinalUrlです
また、長いstringを持っているよりも、このように書いたほうがいいです.
今ではどこでもこのURlをuserに送ることができ、よく動いています.linkを1本の線で伸ばす必要はありません.テストしてみます.
更新後Loginをクリックし、Continue with GitHubをクリックすると正常に動作します.
つまりこのURLに触れ、URLを作り出した後
userRouter.get("/github/start", startGithubLogin);
export const startGithubLogin = (req, res) => {
  const baseUrl = "https://github.com/login/oauth/authorize";
  const config = {
    client_id: "2c44ee26963db98266d4",
    allow_signup: false,
    scope: "read:user user:email",
  };
  const params = new URLSearchParams(config).toString();
  const finalUrl = `${baseUrl}?${params}`;
  return res.redirect(finalUrl);
};
さらにここへredirect.確認してください.彼らはAuthorizationを要求しています.email住所と履歴書情報を読む必要があります.
もう一つやるべきことは、Authorizeをクリックすることです.
そしてAuthorizeをクリックしたとき、URLで何が起こったのかよく見てみましょう.
クリック後http://localhost:4000/users/github/callback?code=a8619d69b2f8e2dbee8c redirectに電話します.考えてみると、最近どこかでこのURLを見たことがあります.Authorization callback URLは、1回目の設定時に指定されたURlです.Githubのうちuserが"yes"を表す場合、Githubはuser http://localhost:4000/users/github/callbackに送信されます.そして、あなたが言ったように、URLにuserを送信します.codeがこのコードです.このコードは後で使います.
次の部分で議論することにした.
現在はないcode=a8619d69b2f8e2dbee8cとURLを作るからです.
幸いなことに、すでにcontorllerを持っています.しかし、/github/startが必要です.
あるいはこれを/github/callbackに変えることができます.交換したほうがいいと思います.
また、このようなエラーが発生したのは/finishです.Cannot GET /users/github/finishにはRouter/users/github/finishがないからです.
その後、URLからLoginに再更新されます.
では、今はもう聞かないで、直接ウェブサイトに送ります.Continue with GithubがGithubだったのを覚えているので、これ以上聞く必要はありません.
では今から"yse"を作ります.
userRouter.get("/github/start", startGithubLogin);
userRouter.get("/github/finish", finishGithubLogin);
export const finishGithubLogin = (req, res) => {};

export const edit = (req, res) => res.send("Edit User");
export const remove = (req, res) => res.send("Remove User");
export const logout = (req, res) => res.send("Log out");
export const see = (req, res) => res.send("See User");
今回のセクションでは/users/github/finishをuserに送信し、Githubをより美しく見せる.
今、URLとuserを一緒に送ります.
次のセクションでは、codeの情報を取得するために、userを使用します.
ネットワーク開発総合クラス第1週1日
iOS AWS Request 4