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

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を応援してください。

以下もご興味があるかもしれません:
  • UniAppを使用してミニプログラムのWeChatログイン機能を実装する

<<:  測定画像HTTPリクエスト

>>:  CSSは高度に適応したフルスクリーンを実現します

推薦する

Dockerはコード検出プラットフォームSonarQubeを構築し、Mavenプロジェクトのプロセスを検出します

1 はじめに優れたコーディング習慣は優れたプログラマーが備えるべき資質ですが、コードの品質を保証する...

Vueでキャッシュされたページを管理する方法

目次問題1: 破壊1. 破壊する方法2. いつ破壊するか2.1 解決策1: route.queryを...

MySQLデータベーステーブルの定期バックアップの実装の詳細な説明

Mysqlデータベーステーブルの定期的なバックアップの実装0. 背景実際の開発環境では、フロントエン...

HTMLコードに基づく画像断片化読み込み機能の実装

今日は断片化された画像の読み込み効果を実装します。効果は次のとおりです。 これを 3 つのステップで...

Tinymce リッチテキストを使用して Vue のツールバーボタンをカスタマイズする実践

目次tinymce、tinymce ts、tinymce-vue 宣言ファイルをインストールするパッ...

シェルスクリプトを使用して Docker サービスを一括で開始および停止する

目次Dockerを起動するDockerを停止するPython 呼び出しスクリプト最近、日々のテストで...

Linux に nginx をインストールする方法

Nginx は C 言語で開発されており、Linux で実行することをお勧めします。もちろん、Win...

VirtualBoxにOpenSuseをインストールする方法

仮想マシンはホストマシンにインストールされます。 CPU とメモリはホスト マシンと共有する必要があ...

Mysql 5.6ではユーザー名とパスワードを変更するメソッドが追加されました

まずMySQLにログインする シェル> mysql --user=root mysqlパスワー...

Docker データボリュームの一般的な操作コードの例

開発者が Dockerfile を使用してイメージをビルドする場合は、イメージをビルドするときにデー...

JSコンストラクタとインスタンス化およびプロトタイプ導入の関係

目次1. コンストラクタとインスタンス化2. コンストラクターとインスタンス化の関係は何ですか? 3...

VMware + Ubuntu18.04 による Hadoop クラスタ環境の構築に関するグラフィック チュートリアル

目次序文VMware クローン仮想マシン (準備、3 台の仮想マシンのクローン、1 台のマスター、2...

CSS3+JavaScript を使用したクールな呼吸効果のサンプル コード

CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...

実践的な経験を共有するためのコードチェックツールstylelintの紹介

目次序文文章1. stylelintをインストールする2. 設定ファイル3. stylelintを使...

nginxリバースプロキシを介したデバッグコードの実装

背景現在、会社のプロジェクトは、フロントエンドとバックエンドが分離された方法で開発されています。新し...