如何在離子3應用程序的openid appauth流程中顯示應用程序內瀏覽器？

Question

我使用此庫使用授權代碼流 - https://github.com/openid/appauth-js

我有一個應用程序啟動時，這個端點名為https://link.com/.well-known/openid-configuration ，然后我被重定向到身份服務器路徑，傳入我的憑據。

問題是我不希望用戶離開應用程序，我希望在應用程序瀏覽器中顯示。 我不完全確定如何生成它。 我該如何實現這個插件 - https://ionicframework.com/docs/v3/native/in-app-browser/

app.component.ts

constructor(){
this.authFlow.fetchServiceConfiguration().then((resp) => {
        console.log(resp, 'logging response')
        this.authFlow.makeAuthorizationRequest()
});
}

auth.flow.ts

fetchServiceConfiguration() {
    return AuthorizationServiceConfiguration.fetchFromIssuer(
      openIdConnectUrl,
      requestor
    ).then(response => {
      // log("Fetched service configuration", response);
      console.log(response, 'logging response from fetch issuer')
      this.configuration = response;
    }).catch((err) => {
      console.log(err, 'logging error')
    });
  }

  makeAuthorizationRequest(username?: string) {
    if (!this.configuration) {
      // log("Unknown service configuration");
      return;
    }

    const extras: StringMap = { prompt: "consent", access_type: "offline" };
    // if (username) {
    //   extras["login_hint"] = username;
    // }

    // create a request
    const request = new AuthorizationRequest({
      client_id: clientId,
      redirect_uri: redirectUri,
      scope: scope,
      response_type: AuthorizationRequest.RESPONSE_TYPE_CODE,
      state: undefined,
      // extras: extras
    });

    // log("Making authorization request ", this.configuration, request);

    this.authorizationHandler.performAuthorizationRequest(
      this.configuration,
      request
    );
  }

Answer 1

添加插件

# Ionic and Cordova plugins
ionic cordova plugin add cordova-plugin-inappbrowser

# Ionic Native with (--save not required on npm@5 and above).
npm install @ionic-native/in-app-browser --save

設定

在app.module.ts里面：

import { InAppBrowser } from '@ionic-native/in-app-browser';

@NgModule({
  providers: [
    ...
    InAppBrowser
  ]
})

home.html中的模板：

<ion-header>
  <ion-navbar color="dark">
    <ion-title>
      InAppBrowser
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-item>
    <ion-label floating>URL</ion-label>
    <ion-input type="url" [(ngModel)]="url"></ion-input>
  </ion-item>

  <button ion-button block clear (click)="openWebpage(url)">Open Webpage</button>

</ion-content>

零件

import { Component, OnInit } from '@angular/core';
import { InAppBrowser, InAppBrowserOptions } from "@ionic-native/in-app-browser";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  url: string;  

  constructor(private inAppBrowser: InAppBrowser) { }

  openWebpage(url: string) {
    const options: InAppBrowserOptions = {
      zoom: 'no'
    }

    // Opening a URL and returning an InAppBrowserObject
    const browser = this.inAppBrowser.create(url, '_self', options);

   // Inject scripts, css and more with browser.X
  }
}