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を応援してください。 以下もご興味があるかもしれません:
|
目次背景コンテナを固定し、数字を上にスクロールすることで、スクロールホイールと同様の効果を実現します...
Web ページを作成するときに、クールでスムーズなドロップダウン メニューが必要になることがあります...
具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...
この記事では、モバイル端末を一度に1画面ずつ上下にスライドさせるためのJSの具体的なコードを参考まで...
この記事の例では、日付と時刻の選択を実装するための uniapp の具体的なコードを参考までに共有し...
CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...
HTML は Hypertext Markup Language の略です。これは、実際のプレゼンテ...
win docker-desktopを使ってコンテナ開発に接続し、ネットワーク上で色々試してみたいと...
目次最初の方法: router-link (宣言型ルーティング) 2番目の方法: router.pu...
目次1 配列のフラット化とは何ですか? 2 JS標準ライブラリの配列フラット化メソッド3 フラットメ...
導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...
1. Web ページをデザインするときに、幅を決定するのは非常に面倒な作業です。 jb51.net ...
tomcat が起動されるたびに、次のログ ファイルがログ ディレクトリに自動的に生成され、日付順...
正規表現を使用してIEブラウザのバージョンを判別するIEブラウザかどうか確認するif (docume...
空のリンク:つまり、ターゲット エンドポイントとのリンクはありません。フォーマット <a hr...