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を応援してください。 以下もご興味があるかもしれません:
|
1 はじめに優れたコーディング習慣は優れたプログラマーが備えるべき資質ですが、コードの品質を保証する...
目次問題1: 破壊1. 破壊する方法2. いつ破壊するか2.1 解決策1: route.queryを...
Mysqlデータベーステーブルの定期的なバックアップの実装0. 背景実際の開発環境では、フロントエン...
今日は断片化された画像の読み込み効果を実装します。効果は次のとおりです。 これを 3 つのステップで...
目次tinymce、tinymce ts、tinymce-vue 宣言ファイルをインストールするパッ...
目次Dockerを起動するDockerを停止するPython 呼び出しスクリプト最近、日々のテストで...
Nginx は C 言語で開発されており、Linux で実行することをお勧めします。もちろん、Win...
仮想マシンはホストマシンにインストールされます。 CPU とメモリはホスト マシンと共有する必要があ...
まずMySQLにログインする シェル> mysql --user=root mysqlパスワー...
開発者が Dockerfile を使用してイメージをビルドする場合は、イメージをビルドするときにデー...
目次1. コンストラクタとインスタンス化2. コンストラクターとインスタンス化の関係は何ですか? 3...
目次序文VMware クローン仮想マシン (準備、3 台の仮想マシンのクローン、1 台のマスター、2...
CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...
目次序文文章1. stylelintをインストールする2. 設定ファイル3. stylelintを使...
背景現在、会社のプロジェクトは、フロントエンドとバックエンドが分離された方法で開発されています。新し...