Uniapp implementiert Beispielcode für die Anmeldung mit DingTalk-Scancode
|
Da Uniapp nicht über eine autorisierte DingTalk-Anmeldung verfügt, wird in diesem Artikel die DingTalk-QR-Code-Anmeldung als Webseite in Uniapp eingebettet und schließlich die DingTalk-QR-Code-Anmelde-App realisiert. 1. Starten Sie DingTalk mit H5 und scannen Sie den QR-Code, um sich anzumeldenWeitere Informationen zum Scannen von Codes zum Anmelden bei DingTalk im Web finden Sie im DingTalk-Dokument: Code scannen, um sich bei Websites von Drittanbietern anzumelden – DingTalk Open Platform (dingtalk.com)
// DingTalk-Scancode zum Anmelden dingLoginFn() {
lass dingData = {
Anwendungs-ID: OUT_LINK_CONFIG.dingAppid,
Zustand: "STATE",
url: encodeURIComponent('Rückrufadresse nach dem Login: kann eine Seitenadresse Ihres H5 (href) sein') // Diese Adresse wird für die Routenumleitung verwendet, nachdem sie durch Scannen des Codes mit DingTalk bestätigt wurde (sie enthält den durch das Scannen des Codes erhaltenen Codewert).
};
let 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}`;
Gehen Sie wie folgt vor, um den Algorithmus zu ändern:
DDLogin({
id: "loginContainer", //Hier müssen Sie einen HTML-Tag in Ihrer eigenen Seite definieren und die ID festlegen, z. B. <div id="login_container"></div> oder <span id="login_container"></span>
gehe zu: gehe zu,
Stil: „Rahmen: keine; Hintergrundfarbe: #FFFFFF;“,
Breite: "268"
});
let handleMessage = (Ereignis) => {
// Bestimmen Sie, ob es sich um ein Code-Scan-Ereignis vom ddLogin handelt.
wenn (event.origin == "https://login.dingtalk.com" && event.data) {
Konsole.log("loginTmpCode", event.data);
window.location.href = `${oauth}&loginTmpCode=${event.data}`; // Nachdem Sie loginTmpCode erhalten haben, können Sie hier einen Sprunglink zum Springen erstellen.}
};
wenn (Typ von window.addEventListener != "undefiniert") {
window.addEventListener("Nachricht", handleMessage, false);
} sonst wenn (Typ von window.attachEvent != "undefined") {
window.attachEvent("beiNachricht", handleMessage);
}
}2. Die für die Weiterleitung verwendete Adresse sollte nicht die Webadresse sein, die den DingTalk-QR-Code aufruft (die Adresse in Schritt 1).Denn in uniapp wird, wenn die beiden Adressen identisch sind, der Code zum Anmeldevorgang zurückgeleitet und die QR-Code-Seite erneut angezeigt, bevor zur Oberfläche für die erfolgreiche Anmeldung gesprungen wird. Routing-Umleitungsseite (dieser Artikel wurde mit Vue erstellt). Wenn Sie die API von Uni in H5 verwenden möchten, müssen Sie das JDK von Uni in public/index.html importieren.
<!DOCTYPE html>
<html lang="">
<Kopf>
<meta charset="utf-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite,Anfangsmaßstab=1,Minimalmaßstab=1,Maximalmaßstab=1,Benutzerskalierbar=nein" />
<!-- Einführung eines JDK zum Scannen der Code-Anmeldung für DingTalk -->
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
<Titel></Titel>
</Kopf>
<Text>
<keinSkript>
<strong>Es tut uns leid, aber <%= htmlWebpackPlugin.options.title %> funktioniert nicht richtig, wenn JavaScript nicht aktiviert ist. Bitte aktivieren Sie es, um fortzufahren.</strong>
</noscript>
<div id="app"></div>
<!-- erstellte Dateien werden automatisch eingefügt -->
</body> <!-- Importieren Sie das JDK der Uni-API. Hinweis: Es muss nach dem Body importiert werden. Beim Importieren im Header schlägt das Ergebnis möglicherweise fehl -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
</html>Weiterleitungsseite:
<Vorlage>
<div></div>
</Vorlage>
<Skript>
Standard exportieren {
Name: "LoginCallback",
mounted() { // Im gemounteten Lebenszyklus auf die Parameter warten, die nach der DingTalk-Umleitung übertragen werden, und diese an uniapp zurückgeben
document.addEventListener("plusready", () => {
dies.$nextTick(() => {
// Nachdem das Ereignis „UniAppJSBridgeReady“ ausgelöst wurde, können Sie die Uni-API aufrufen. Wenn Sie es nicht aufrufen, sobald die Seite geöffnet wird, benötigen Sie diesen Listener nicht. document.addEventListener("UniAppJSBridgeReady", () => {
// dies.$toast("location.search:::", JSON.stringify(location.search));
wenn (location.search.includes("?code")) {
console.log("getCode:::");
let code = location.search.split("?")[1].split("&")[0].split("=")[1]; // Nachdem Sie den Code hier erhalten haben, springen Sie über die Uni-API zurück zur Uniapp-Seite und übernehmen Sie die Parameter (die Sie in onLoad in Uniapp erhalten haben) oder übergeben Sie sie über uni.postMessage({data: [code]}), das von Uniapp bereitgestellt wird (Hinweis: Die über postMessage übergebenen Parameter erhalten die Daten in Uniap als Array).
uni.webView.navigateTo({
URL: `/Seiten/Login/Login_Webview?Code=$[Code]`
});
}
});
});
});
}
};
</Skript>3. In Uniapp können Sie Webview verwenden, um die Webseite zum Scannen des Codes auf DingTalk zu hosten und die Codeparameter abzurufen, die nach dem Scannen des Codes auf DingTalk erhalten wurden.
<Skript>
importiere { dingLogin } von '@/api/login'
importiere { setToken } von "@/utils/auth"
Standard exportieren {
Name: "LoginWebview",
Daten() {
zurückkehren {
URL: „http://xxxxxxx/dd_login“ // Die URL hier ist die in Schritt 1 geschriebene Adresse der DingTalk-QR-Code-Scan-Webseite}
},
onLoad(Optionen) { // Dies ist der Parametercode, der nach dem Scannen des Codes für die Anmeldung zurückgegeben wird, wenn (Optionen.Code) {
dies.login(Optionen.code)
}
},
Methoden: {
asynchrone Anmeldung(Code) {
uni.showLoading()
versuchen {
const res = warte auf dingLogin(code)
wenn (res.data.code === 200) {
setToken(res.data.token)
uni.reLaunch({
URL: '/Seiten/Home/Index'
})
}
uni.hideLoading()
} fangen (e) {
console.log('Anmeldung fehlgeschlagen', e)
uni.hideLoading()
}
}
}
}
</Skript>Okay, es ist geschafft! ! ! Wenn Sie von der DingTalk-Scancode-Seite zu uniapp zurückkehren müssen, um die Anmeldemethode zu wechseln, können Sie über die API von uni zu uniapp zurückspringen.
uni.webView.navigateTo({
URL: "/Seiten/Login/Index"
});Dies ist das Ende dieses Artikels zur Implementierung der Anmeldung per DingTalk-QR-Code-Scanning auf Uniapp. Weitere Informationen zur Implementierung der Anmeldung per DingTalk-QR-Code-Scanning auf Uniapp finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Gemessenes Bild - HTTP-Anforderung
>>: CSS erreicht hochadaptiven Vollbildmodus
Artikel empfehlen
Mit dem Swiper.js-Plugin ist die Implementierung von Karussellbildern ganz einfach
Swiper ist ein mit reinem JavaScript erstelltes P...
So verwenden Sie Nginx, um einen RTMP-Liveserver auszuführen
Dieses Mal haben wir einen RTMP-Liveübertragungss...
MySQL verwendet Ereignisse, um geplante Aufgaben abzuschließen
Ereignisse können die Ausführung von SQL-Code ein...
Tutorial zur HTML-Tabellenauszeichnung (10): Zell-Padding-Attribut CELLPADDING
Unter Zellenabstand versteht man den Abstand zwis...
Stellen Sie das Vue-Projekt auf einem Linux-Server bereit
Fall 1 vue-cli erstellt das vue3-Projekt, lädt da...
Einführung in die Nginx-Protokollverwaltung
Nginx-Protokollbeschreibung Über Zugriffsprotokol...
Detaillierte Erklärung zum Ein- und Aussteigen aus dem Docker-Container
1 Starten Sie den Docker-Dienst Zuerst müssen Sie...
So implementieren Sie vertikale Textausrichtung mit CSS (Zusammenfassung)
Die Standardanordnung von Text in HTML ist horizo...
HTML-Codeanalyse der Textkonvertierungseffekte bei Links- und Rechtsbewegungen
<div ausrichten="zentrieren"> <...
Klicken Sie in Vue auf den Umschaltknopf, um die Schaltfläche zu aktivieren und dann zu deaktivieren.
Die Implementierungsmethode gliedert sich in drei...
Einführung in Abfragebefehle für gespeicherte MySQL-Prozeduren
Wie unten dargestellt: Wählen Sie den Namen aus m...
MySQL 8.x MSI-Version Installations-Tutorial mit Bildern und Text
1. MySQL herunterladen Offizielle Website-Downloa...
So verwenden Sie natives JS zum Implementieren von Touch-Sliding-Überwachungsereignissen
Vorwort Ich habe heute eine kleine Demo geschrieb...
Detaillierte Erklärung der berechneten Eigenschaften, der Überwachungseigenschaften und des Lebenszyklus in Vue.js
Inhaltsverzeichnis Vorwort Berechnete Eigenschaft...
Implementierung eines Karussells mit nativem JavaScript
In diesem Artikel finden Sie den spezifischen Cod...