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
Reacts Methode zur Realisierung einer sekundären Verknüpfung
In diesem Artikel wird der spezifische Code von R...
So erstellen Sie mit Photoshop ein Web-Drahtgittermodell
Dieser Beitrag stellt eine Reihe kostenloser Phot...
Vuex in einem Artikel verstehen
Inhaltsverzeichnis Überblick Die vier Hauptobjekt...
Schritte für Vue zur Verwendung von Ref, um Komponenten über Ebenen hinweg zu erhalten
Vue verwendet Ref, um Komponenteninstanzen über E...
Lösung für 404-Fehler beim Herunterladen einer APK-Datei vom IIS-Server
Bei der Verwendung von IIS als Server wurde die A...
Beispiel für die Erzeugung eines Flügelschlags eines Schmetterlings mit reinem CSS3
Mit reinem CSS3 lässt sich ein Schmetterling mit ...
Details zur Bündelung statischer Ressourcen ohne JavaScript
Inhaltsverzeichnis 1. Benutzerdefinierter Import ...
So installieren Sie Nginx schnell unter Linux
Inhaltsverzeichnis Was ist nginx 1. Laden Sie die...
Einführung in die HTML-Formularsteuerung deaktivierte Attribute schreibgeschützt VS deaktiviert
Es gibt zwei Möglichkeiten, die Formularübermittl...
MySQL 8.0.19 unterstützt die Sperrung eines Kontos nach dreimaliger Eingabe eines falschen Passworts (Beispiel)
MySQL 8.0.19 unterstützt die Sperrung des Kontos ...
Interpretation des Moduls zum Lastenausgleich mit nginx
Inhaltsverzeichnis Zwei Module zur Verwendung von...
WeChat-Applet implementiert Suchfeldfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Berechnung des Prozentwerts, wenn die CSS-Positionseigenschaft absolut ist
Wenn die Position absolut ist, wird der Prozentsa...
Implementierungscode für die Sicherung und Wiederherstellung von MySQL-Datenbanken
Datenbanksicherung #Grammatik: # mysqldump -h ser...
Absteigender Index in MySQL 8.0
Vorwort Ich glaube, jeder weiß, dass Indizes geor...