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は高度に適応したフルスクリーンを実現します

推薦する

jsは徐々に増加するデジタルアニメーションを実現します

目次背景コンテナを固定し、数字を上にスクロールすることで、スクロールホイールと同様の効果を実現します...

jQueryはドロップダウンメニューのスライド効果を実現します

Web ページを作成するときに、クールでスムーズなドロップダウン メニューが必要になることがあります...

MySQLはパスワードなしでログインする例を実装しています

具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...

JSはモバイル端末の画面を1つずつ上下にスライドさせる機能を実装します

この記事では、モバイル端末を一度に1画面ずつ上下にスライドさせるためのJSの具体的なコードを参考まで...

uniapp は日付と時刻の選択機能を実装します

この記事の例では、日付と時刻の選択を実装するための uniapp の具体的なコードを参考までに共有し...

CSS の優先順位に関する詳細な紹介

CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...

HTMLの基礎知識:ウェブページの基礎知識

HTML は Hypertext Markup Language の略です。これは、実際のプレゼンテ...

Docker の win ping 失敗コンテナ回避ガイド

win docker-desktopを使ってコンテナ開発に接続し、ネットワーク上で色々試してみたいと...

Vue でルートをジャンプする方法をご存知ですか?

目次最初の方法: router-link (宣言型ルーティング) 2番目の方法: router.pu...

JavaScript インタビュー: 配列の平坦化メソッドを実装する方法

目次1 配列のフラット化とは何ですか? 2 JS標準ライブラリの配列フラット化メソッド3 フラットメ...

Mysql 主キー UUID と自動増分主キーの違いと利点と欠点

導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...

最適なウェブページ幅とその互換性のある実装方法

1. Web ページをデザインするときに、幅を決定するのは非常に面倒な作業です。 jb51.net ...

tomcat ログ ディレクトリ内のログ ファイルの分析 (概要)

tomcat が起動されるたびに、次のログ ファイルがログ ディレクトリに自動的に生成され、日付順...

js、css、htmlはブラウザのさまざまなバージョンを決定します

正規表現を使用してIEブラウザのバージョンを判別するIEブラウザかどうか確認するif (docume...

HTMLの空リンクの役割についての簡単な説明

空のリンク:つまり、ターゲット エンドポイントとのリンクはありません。フォーマット <a hr...