angular4.0微信oAuth第三方認證的正確方式

當我們的項目運行在微信端時，用到oAuth第三方認證。問題來了，在ng4中微信認證應該放在哪里呢？

開始項目的時候，我將oAuth認證放在了每個頁面模版中，發現返回歷史頁的時候，需要返回兩次。

這個問題應該是認證的時候跳轉頁面導致的，所以，我們要考慮將oAuth放到合適的位置去。

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

一、引入oauth.js文件

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

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

 

二、聲明變量oAuth

這一步很關鍵，因為引入的js文件中的對象oAuth，並不能被ng識別，所以我們需要先聲明oAuth。

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

declare var oAuth: any;

 

三、在main.ts實現oAuth微信認證

為什么在main.ts中實現認證？main.ts負責引導整個angular應用的起點。具體請移步我寫的《angular4.0項目main.ts詳解》中去學習吧。

實現微信認證請看下面的代碼，核心是：在微信認證完成后的回調中，執行 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認證
oAuth.cfg(Config.uid, Config.isDebug, Config.scope);
oAuth.checkToken((apiopenid, apitoken) => {
    Config.apiopenid = apiopenid;
    Config.apitoken = apitoken;
    //認證完成后，調用bootstrapModule方法來傳入AppModule作為啟動模塊來啟動應用。
    platformBrowserDynamic().bootstrapModule(AppModule);
});

 

ok，就這樣完成了，謝謝大嬸指點。