如何通过 Angular 4 Web 应用程序访问 hperledger composer REST api

Question

目前我们正在使用 angular 4 和 hyperledger composer 创建 Web 应用程序。 REST 服务器启用了 google oAuth 身份验证。并且已经在https://console.developers.google.com/上完成了所有相关设置

场景是用户将使用自己的 gmail 帐户登录，并且应该能够访问 hyperledger composer 的 REST api。 基本上使用 Web 应用程序 https://hyperledger.github.io/composer/latest/tutorials/google_oauth2_rest 执行本教程。

但问题是当用户使用 Angular Web 应用程序通过 Web 浏览器登录时，我们从 google 获取令牌，但我无法访问任何 REST api。它在 http://localhost:3000 上运行得非常好。但是当我从网络应用程序或通过邮递员尝试它时，它根本不起作用..

是否有人为超级账本作曲家执行或做过这种类型的用户登录验证？

Answer 1

从您的 Angular 客户端（即经过身份验证的客户端），您需要确保设置了 withCredentials 选项，以便创建 cookie 以将身份验证令牌传递给 REST 服务器。

例如

headers.set('Content-Type', 'multipart/form-data');

return this.httpClient.post('http://localhost:3000/api/wallet/import', formData, {withCredentials: true, headers}).toPromise();

现在客户端已通过 REST 服务器进行身份验证，并且身份已添加到钱包（通过导入），现在可以调用业务网络端点：例如调用查询或 /GET - 以下示例：

return this.httpClient.get('http://localhost:3000/api/queries/myQuery', {withCredentials: true}).toPromise();

return this.httpClient.get('http://localhost:3000/api/Commodity', {withCredentials: true}).toPromise();

this.http.get('http://mydomain:3000/api/MyAsset', { withCredentials: true })

Answer 2

使用以下方法验证您的 Angular 应用程序：

 <a id="googleLogin" href="http://domain:3000/auth/google">Log In</a>

这将使用 composer rest api 对用户进行身份验证，并在浏览器中设置会话 cookie。

现在，如果您使用 {withCreditails:true} 访问钱包 api，那么它就可以工作了。

this.http.get('http://domain:3000/api/wallet', { withCredentials: true })

注销：

<a id="googleLogin" href="domain:3000/auth/logout/auth/logout" (click)='logout()'>Logout</a>

要访问登录用户的用户配置文件，请使用具有相同 ClientID 的 gapi，但仅将其用于 init() 和附加侦听器。不要通过 gapi 登录或退出。

我实现了这个解决方案并且工作得很好。

declare
const gapi: any;
googleUser: any;
public auth2: any;
private clientId: string = 'YOUR-CLIENT-ID.apps.googleusercontent.com';
private scope = [
  'https://www.googleapis.com/auth/plus.login'
].join(' ');

public googleInit() {
  if (gapi) {
    gapi.load('auth2', () => {
      this.auth2 = gapi.auth2.init({
        client_id: this.clientId,
        scope: this.scope
      });
      this.attachSignin(document.getElementById('googleLogin'));
      this.init();
    });
  } else {
    setTimeout(() => {
      this.googleInit();
    }, 500);
  }
}

public attachSignin(element) {
  this.auth2.attachClickHandler(element, {},
    (googleUser) => {
      let profile = googleUser.getBasicProfile();
      console.log('Token || ' + googleUser.getAuthResponse().id_token);
      console.log('ID: ' + profile.getId());
      // ...
    },
    function(error) {
      console.log(JSON.stringify(error, undefined, 2));
    });
}

init() {
  this.auth2.isSignedIn.listen(this.signinChanged);
  this.auth2.currentUser.listen(this.userChanged);
  this.refreshValues();
}

signinChanged = (val) => {
  console.log('google ### signinChanged', val);
}
/**
 * Listener method for when the user changes.
 *
 * @param {GoogleUser} user the updated user.
 */
userChanged = (user) => {
  console.log('google ### User now: ', user);
  this.googleUser = user;
  this.updateGoogleUser();
};

updateGoogleUser() {
  console.log('google ### user', this.googleUser);
  if (this.googleUser && this.googleUser.w3 && this.googleUser.Zi) {
    let userProfile: UserProfile = {
      id: this.googleUser.El,
      name: this.googleUser.w3.ig,
      email: this.googleUser.w3.U3,
      image: this.googleUser.w3.Paa,
      token: this.googleUser.Zi.access_token,
      idToken: this.googleUser.Zi.id_token,
      provider: this.googleUser.Zi.idpId
    }
    localStorage.setItem('profile', JSON.stringify(userProfile));
  }
}

refreshValues = () => {
  if (this.auth2) {
    console.log('google ### Refreshing values...');

    this.googleUser = this.auth2.currentUser.get();

    this.updateGoogleUser();
  }
}
logout() {
  this.auth2.signOut();
}