0

我正在使用此库的授权代码流 - 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
    );
  }
4

1 回答 1

0

添加插件

# 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
  }
}
于 2019-05-24T05:11:06.937 回答