SpringBoot+Vue はサードパーティの Gitee ログインを実装します (2)

1.準備作業_OAuth2（公式サイトアドレス：開発の流れ）

1.1 API利用規約

1. OSCHINA ユーザーはリソースの所有者であり、ユーザーの権利と利益を尊重し、保護する必要があります。

2. OSCHINAの名前はアプリケーション内では使用できません。

3. ユーザーの許可がない限り、ユーザーのリソースをクロールしたり保存したりすることはできません。

4. APIの悪用は禁止しており、リクエスト頻度が多すぎるとリクエストが強制終了される場合があります。

1.2 OAuth2認証の基本的な流れ

1. 適用されたアプリケーション ID (クライアント ID、コールバックアドレスなど) を使用して、Gitee サーバーへの承認リクエストを開始します。

2. Gitee 認証サーバーは、コールバックアドレス {redirect_uri} [コールバックアドレスに渡す] を介してユーザー認証コード code を返します。

3. ユーザーの認証コードコードとアプリケーション ID などの情報を使用して、Gitee サーバーにアクセスし、ユーザーのアクセストークン (Access Token) を取得します。

4. アクセストークンを取得したら、Giteeサーバーにアクセスし、トークンに基づいてユーザーのID、名前、メールアドレスなどの情報を取得します。

2.「Giteeログイン」ボタンを配置

このステップの役割:

　　Web サイトのページに「Gitee ログイン」ボタンを配置し、そのボタンにフロントエンドコードを追加して、ボタンをクリックしたときに Gitee ログインダイアログボックスがポップアップするようにします。

2.1 「Gitee ログイン」ボタンの画像をダウンロードし、ページ上の適切な位置にボタンを配置します。

Alibaba Vector Icon　　Library にアクセスして、その他のアイコンをダウンロードできます。

2.2 ページに「Gitee ログイン」ボタンを追加します

2.2.1 効果実証

2.2.2 フロントエンドコード (Vue)

　　上記の効果を実現するには、次のフォアグラウンドコードを「Gitee ログイン」ボタンの画像に追加する必要があります。

<div style="line-height: 22px;margin:0 0 8px 0;color: #9b9b9b;">
        <span style="vertical-align:middle">第三方登录:</span>
        <img :src="qqIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="QQ">
        <img :src="baiduIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="百度">
        <img :src="weiboIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="微博">
        <img :src="zhifubaoIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="支付宝">
        <img :src="giteeIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="Gitee">
        <img :src="githubIcon" width="22" height="22" style="vertical-align:middle;margin-left: 8px" title="GitHub">
</div>

2.2.2 バックエンドコード (Java)

1.Gitee ログイン設定ファイル情報:

# gitee登录配置
gitee.appID = 679f486666666666666660b0022d43b2(替换自己的)
gitee.appKEY = c37e5666666666666666666666666666666618be(替换自己的)
gitee.redirectURI = https://www.youyoushop.work/giteeCallback(替换自己的)
gitee.authorizeURL = https://gitee.com/oauth/authorize
gitee.accessToken = https://gitee.com/oauth/token
gitee.userInfo = https://gitee.com/api/v5/user

2. 構成ファイル情報の定数クラスを読み取ります。

package com.liyh.constants;

import lombok.Data;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;

/**
 * gitee登陆常量配置类
 *
 * @author Liyh
 */
@Data
@Configuration
@PropertySource("classpath:config.properties")
public class GiteeConstants {

    @Value("${gitee.appID}")
    private String appID;

    @Value("${gitee.appKEY}")
    private String appKEY;

    @Value("${gitee.redirectURI}")
    private String redirectURI;

    @Value("${gitee.authorizeURL}")
    private String authorizeURL;

    @Value("${gitee.accessToken}")
    private String accessToken;

    @Value("${gitee.userInfo}")
    private String userInfo;

}

3. Conteoller (Gitee ログインの URL を取得)

/**
     * 获得跳转到Gitee登录页的url,前台直接a连接访问
     *
     * @return
     */
    @GetMapping("/getGiteeCode")
    public Result getGiteeCode() {
        // 授权地址 ,进行Encode转码
        String authorizeURL = giteeConstants.getAuthorizeURL();

        // 回调地址 ,回调地址要进行Encode转码
        String redirectUri = giteeConstants.getRedirectURI();

        // 用于第三方应用防止CSRF攻击
        String uuid = UUID.randomUUID().toString().replaceAll("-", "");

        // 拼接url
        StringBuilder url = new StringBuilder();
        url.append(authorizeURL);
        url.append("?client_id=" + giteeConstants.getAppID());
        url.append("&response_type=code");
        // 转码
        url.append("&redirect_uri=" + URLEncodeUtil.getURLEncoderString(redirectUri));
        url.append("&state=" + uuid);
        url.append("&scope=user_info");

        return Result.success("操作成功", url);
    }

3. AccessTokenを取得する

3.1 認証コードの取得

注: 以前に認証されている場合に認証ページをスキップする必要がある場合は、上記の最初の手順で URL にscopeパラメータを追加する必要があります。また、scopeの値はユーザーの最後の認証チェックと一致している必要があります。

リクエストアドレス:

https://gitee.com/oauth/authorize?client_id={client_id}&redirect_uri={redirect_uri}&response_type=code&scope=user_info

リクエスト方法：

　　得る

リクエストパラメータ:

パラメータ	それは必要ですか	意味
応答タイプ	しなければならない	認可タイプ、この値は「コード」で固定です。
クライアントID	しなければならない	Gitee に正常にログインした後にアプリケーションに割り当てられた appid。
リダイレクト_uri	しなければならない	認証成功後のコールバックアドレスは、appid登録時に入力したメインドメイン名の下のアドレスとし、WebサイトのトップページまたはWebサイトのユーザーセンターに設定することを推奨します。URL は URL エンコードする必要があることに注意してください。
州	オプション	クライアントのステータス値。サードパーティアプリケーションがCSRF攻撃を防ぐために使用するもので、認証成功後はコールバック時にそのまま返されます。ユーザーのバインドと状態パラメータの状態をプロセスに従って厳密にチェックしてください。
範囲	しなければならない	ユーザー承認を要求するときにユーザーに表示される、利用可能な承認のリスト。インターフェース user_info の認可を要求します。認可項目の数が増えると、ユーザーが認可の実行を拒否する可能性が高くなるため、認可項目の数を制御し、必要なインターフェイス名のみを渡すことをお勧めします。

返品手順:

1. ユーザーが正常にログインして認証すると、指定されたコールバックアドレスにジャンプし、redirect_uri アドレスの後に認証コードと元の状態の値が表示されます。好き：

https://www.youyoushop.work/giteeCallback?code=1E83738E1231233B1224D9B3C&state=cca3c152c52722123123d2963fe

2. PCサイトの場合、ログイン認証処理中にユーザーがログイン処理をキャンセルした場合、ログインページは直接閉じられます。

3.2 認可コードによるアクセストークンの取得

アプリケーションサーバーまたは Webview は、access_token API を使用してコードクラウド認証サーバーに POST リクエストを送信し、ユーザー認証コードとコールバックアドレスを渡します ( POST リクエスト )

注: データのセキュリティを確保するために、リクエストプロセス中に、値を渡すために client_secret を本文に入れることをお勧めします。

リクエストアドレス:

https://gitee.com/oauth/token?grant_type=authorization_code&code={code}&client_id={client_id}&redirect_uri={redirect_uri}&client_secret={client_secret}

リクエスト方法：

　　役職

リクエストパラメータ:

パラメータ	それは必要ですか	意味
許可の種類	しなければならない	認可タイプ。このステップでは、値は「authorization_code」です。
クライアントID	しなければならない	Gitee のログイン申請後に Web サイトに割り当てられた appid が正常にログインします。
クライアントシークレット	しなければならない	Gitee に正常にログインした後に Web サイトに割り当てられた appkey。
コード	しなければならない	前のステップで返された認証コード。
リダイレクト_uri	しなければならない	前の手順で渡された redirect_uri と一貫性を保ってください。

返品手順:

　　戻りが成功すると、戻りパケットでアクセストークンを取得できます。例 (fmt が指定されていない場合):

access_token=FE04************CCE2&expires_in=7776000&refresh_token=88E4****************BE14

パラメータの説明	説明
アクセストークン	認可トークン、Access_Token。
期限切れ_in	アクセストークンの有効期間 (秒単位)。
リフレッシュトークン	認可の自動更新ステップで新しい Access_Token を取得するときに指定する必要があるパラメーター。注：refresh_token は 1 回のみ有効です

エラーコードの説明:

　access_token が 403 を返す場合は、User-Agent が設定されていない可能性があります。

詳細については、「トークンの取得時にサーバーがステータス 403 で応答するとどうなりますか?」を参照してください。

3.4 (オプション) 権限を自動的に更新し、アクセストークンを更新する

　　access_token の有効期限（1 日有効）が切れた場合は、次の refresh_token メソッドで access_token を再取得できます。

リクエストアドレス:

https://gitee.com/oauth/token?grant_type=refresh_token&refresh_token={refresh_token}

リクエスト方法：

　　役職

リクエストパラメータ:

パラメータ	それは必要ですか	意味
許可の種類	しなければならない	認可タイプ。このステップでは、この値は「refresh_token」です。
リフレッシュトークン	しなければならない	初回: Step2で取得した最新のrefresh_tokenを使用します。フォローアップ: リフレッシュ後に返された最新のrefresh_tokenを使用します。

エラーコードの説明:

　access_token が 403 を返す場合は、User-Agent が設定されていない可能性があります。

詳細については、「トークンの取得時にサーバーがステータス 403 で応答するとどうなりますか?」を参照してください。

4. ユーザー情報の取得

リクエストアドレス:

https://gitee.com/api/v5/user?access_token=xxx&

リクエスト方法:

　　得る

リクエストパラメータ:

パラメータ	それは必要ですか	意味
アクセストークン	しなければならない	Step1で取得したアクセストークン。

5. テスト Web サイト (アドレス)、必要な小規模パートナーがテスト可能

5.1 プロジェクトのニーズは人それぞれ異なり、さまざまな問題が発生する可能性があります。この記事は参考用です。

5.2 SpringBoot+Vue はサードパーティの Gitee ログインを実装します (1)

5.3 その他のサードパーティのログイン方法: https://www.cnblogs.com/liyhbk/category/2089783.html

6. ソースコードの購入

6.1 簡潔版 (淘宝網のソースコード)

ログイン、サードパーティログイン、ジャンプホームページ、SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI などが含まれます。

6.2 多機能バージョン (淘宝網のソースコード)

ログイン、登録、サードパーティログイン、完全なシステム管理モジュール、システムツールモジュール、システム監視モジュール、パーソナルセンターなど、SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUIなどが含まれます。