當(dāng)我們的項(xiàng)目運(yùn)行在微信端時(shí)，用到oAuth第三方認(rèn)證。問題來了，在ng4中微信認(rèn)證應(yīng)該放在哪里呢？

開始項(xiàng)目的時(shí)候，我將oAuth認(rèn)證放在了每個(gè)頁面模版中，發(fā)現(xiàn)返回歷史頁的時(shí)候，需要返回兩次。

這個(gè)問題應(yīng)該是認(rèn)證的時(shí)候跳轉(zhuǎn)頁面導(dǎo)致的，所以，我們要考慮將oAuth放到合適的位置去。

下面具體的來說一說oAuth在ng4的步驟。

一、引入oauth.js文件

將oauth.js文件放在“assets”文件夾下，然后在index.html里面引入

<script src="assets/js/oauth.js"></script>

?

二、聲明變量oAuth

這一步很關(guān)鍵，因?yàn)橐氲膉s文件中的對象oAuth，并不能被ng識別，所以我們需要先聲明oAuth。

在typings.d.ts中全局申明oAuth變量

declare var oAuth: any;

?

三、在main.ts實(shí)現(xiàn)oAuth微信認(rèn)證

為什么在main.ts中實(shí)現(xiàn)認(rèn)證？main.ts負(fù)責(zé)引導(dǎo)整個(gè)angular應(yīng)用的起點(diǎn)。具體請移步我寫的《angular4.0項(xiàng)目main.ts詳解》中去學(xué)習(xí)吧。

實(shí)現(xiàn)微信認(rèn)證請看下面的代碼，核心是：在微信認(rèn)證完成后的回調(diào)中，執(zhí)行?platformBrowserDynamic().bootstrapModule(AppModule);

import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment';if (environment.production) {enableProdMode(); }//微信oauth認(rèn)證 oAuth.cfg(Config.uid, Config.isDebug, Config.scope); oAuth.checkToken((apiopenid, apitoken) => {Config.apiopenid = apiopenid;Config.apitoken = apitoken;//認(rèn)證完成后，調(diào)用bootstrapModule方法來傳入AppModule作為啟動模塊來啟動應(yīng)用。 platformBrowserDynamic().bootstrapModule(AppModule); });

?

ok，就這樣完成了，謝謝大嬸指點(diǎn)。

?

轉(zhuǎn)載于:https://www.cnblogs.com/minigrasshopper/p/7727974.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的angular4.0微信oAuth第三方认证的正确方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。