Uniapp は DingTalk スキャンコードログインサンプルコードを実装します

UniappにはDingTalk認証ログインがないため、この記事ではDingTalk QRコードログインをWebページとしてUniappに埋め込み、最終的にDingTalk QRコードログインアプリを実現します。

1. H5を使用してDingTalkを起動し、QRコードをスキャンしてログインします

ウェブ上の DingTalk にログインするためのコードをスキャンする方法の詳細については、DingTalk ドキュメント「サードパーティの Web サイトにログインするためのコードをスキャンする - DingTalk Open Platform (dingtalk.com)」を参照してください。

// DingTalkにログインするためのスキャンコード dingLoginFn() {
      dingData = {
        アプリID: OUT_LINK_CONFIG.dingAppid、
        状態: "状態"、
        url: encodeURIComponent('ログイン後のコールバックアドレス: H5 (href) のページアドレスにすることができます') // このアドレスは、DingTalk でコードをスキャンして確認した後、ルートのリダイレクトに使用されます (コードのスキャンによって取得されたコード値が保持されます)
      };
      oauth = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${dingData.appid}&response_type=code&scope=snsapi_login&state=${dingData.state}&redirect_uri=${dingData.url}`;
      encodeURIComponent(oauth) に移動します。
      DDログイン({
        id: "loginContainer", //ここで、独自のページで HTML タグを定義し、<div id="login_container"></div> や <span id="login_container"></span> などの ID を設定する必要があります。
        移動先: 移動先、
        スタイル: "border:none;background-color:#FFFFFF;",
        幅: "268"
      });
      handleMessage = (イベント) => {
        // ddLogin コード スキャン イベントからのものであるかどうかを判断します。
        イベントのオリジンが "https://login.dingtalk.com" の場合、イベントデータは次のようになります。
          console.log("loginTmpCode", イベントデータ);
          window.location.href = `${oauth}&loginTmpCode=${event.data}`; // loginTmpCode を取得したら、ここにジャンプ リンクを構築してジャンプできます。}
      };
      if (typeof window.addEventListener != "undefined") {
        window.addEventListener("メッセージ", handleMessage, false);
      } そうでない場合 (typeof window.attachEvent != "undefined") {
        ウィンドウにイベントを添付します("onmessage"、handleMessage);
      }
    }

2. ルーティングリダイレクトに使用するアドレスは、DingTalk QRコードを呼び出すWebアドレス（手順1のアドレス）であってはなりません。

uniapp では、2 つのアドレスが同じ場合、コードがログインプロセスに返され、ログイン成功インターフェイスにジャンプする前に QR コードページが再度表示されます。ルーティングリダイレクトページ（この記事はVueで構築されています）。H5でuniのAPIを使用する場合は、public/index.htmlでuniのjdkをインポートする必要があります。

<!DOCTYPE html>
<html lang="">
  <ヘッド>
    <メタ文字セット="utf-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1、最小スケール=1、最大スケール=1、ユーザースケーラブル=いいえ" />
    <!-- DingTalk のスキャンコードログイン用 JDK の紹介 -->
    <script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
    <タイトル></タイトル>
  </head>
  <本文>
    <スクリプトなし>
      <strong>申し訳ありませんが、JavaScript が有効になっていないと <%= htmlWebpackPlugin.options.title %> は正しく動作しません。続行するには JavaScript を有効にしてください。</strong>
    </noscript>
    <div id="アプリ"></div>
    <!-- ビルドされたファイルは自動的に挿入されます -->
  </body> <!-- uni API の JDK をインポートします。注: body の後にインポートする必要があります。head でインポートすると取得に失敗する可能性があります -->
  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
</html>

リダイレクトページ:

<テンプレート>
  <div></div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: "LoginCallback",
  マウントされた（）{ // マウントされたライフサイクルでは、DingTalkリダイレクト後に運ばれるパラメータをリッスンし、uniappに返します。
    document.addEventListener("plusready", () => {
      this.$nextTick(() => {
        // `UniAppJSBridgeReady` イベントがトリガーされた後、uni API を呼び出すことができます。ページが開かれたらすぐに呼び出さない場合は、このリスナーは必要ありません document.addEventListener("UniAppJSBridgeReady", () => {
          // this.$toast("location.search:::", JSON.stringify(location.search));
          location.search.includes("?code") の場合
            console.log("getCode:::");
            let code = location.search.split("?")[1].split("&")[0].split("=")[1]; // ここでコードを取得したら、uni API を介して uniapp ページに戻り、パラメータ (uniapp の onLoad で取得) を渡すか、uniapp によって提供される uni.postMessage({data: [code]}) を介して渡します (注: postMessage を介して渡されるパラメータは、uniap のデータを配列として取得します)
            uni.webView.navigateTo({
              url: `/pages/login/login_webview?code=$[code]`
            });
          }
        });
      });
    });
  }
};
</スクリプト>

3. uniappでは、Webviewを使用してDingTalkのコードをスキャンするためのWebページをホストし、DingTalkのコードをスキャンした後に取得したコードパラメータを受け取ることができます。

<スクリプト>
    '@/api/login' から { dingLogin } をインポートします。
    "@/utils/auth" から { setToken } をインポートします。
    エクスポートデフォルト{
        名前: "LoginWebview",
        データ（） {
            戻る {
                url: 'http://xxxxxxx/dd_login' // ここでの url は、手順 1 で記述した DingTalk QR コード スキャン ウェブページ アドレスです}
        },
        onLoad(options) { // これはログインのコードをスキャンした後に返されるパラメータコードです if (options.code) {
                this.login(オプション.コード)
            }
        },
        メソッド: {
            非同期ログイン(コード) {
                uni.showLoading()
                試す {
                    const res = await dingLogin(コード)
                    （res.data.code === 200）の場合{
                        setToken(res.data.token)
                        uni.reLaunch({
                            URL: '/pages/home/index'
                        })
                    }
                    uni.hideLoading()
                } キャッチ (e) {
                    console.log('ログインに失敗しました', e)
                    uni.hideLoading()
                }
            }
        }
    }
</スクリプト>

はい、完了です！！！

ログイン方法を切り替えるためにDingTalkスキャンコードページからuniappに戻る必要がある場合は、uniのAPIを介してuniappに戻ることができます。

uni.webView.navigateTo({
    URL: "/pages/login/index"
});

uniappでDingTalk QRコードスキャンログインを実装する方法についての記事はこれで終わりです。uniappでDingTalk QRコードスキャンログインを実装する方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません: