Question

我正在尝试使用我的离子2应用程序中的链接实现登录/注册。为了同一目的，请参考此linked official documentation。根据文档，首先必须执行使用OAuth 2.0进行身份验证。为此，我在网络上找到了几个在app浏览器中使用的解决方案。下面是我当前使用按钮链接点击登录时执行的代码。

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

export class LoginPage {

 constructor(public navCtrl: NavController ) {}

 const browser =
 this.iab.create('https://www.linkedin.com/uas/oauth2/authorization?response_type=code&client_id=81zzocd5beagbo&scope=r_basicprofile%20r_emailaddress&state=STATE&redirect_uri=http://localhost:8100&scope=r_fullprofile%20r_emailaddress%20w_share');


     browser.show();

}

我现在面临下面的问题。

成功登录后链接后，它将被重定向到developer.linkedin.com网站中指定的重定向网址，该网址将在创建应用时提及。
我需要知道我必须指定的URL是什么，以便在成功登录/取消后，它将被重定向回应用程序。
如何从该特定网址中提取代码，状态，进一步用于调用linkedin get API以获取用户详细信息。
或者，如果有任何登录/注册linkIn的最佳做法，请更新我。

注意：我已经提到了离子2 linked in plugin。但除非用户在他的设备中安装了linkedin app，否则我们无法使用该插件。

Answer 1

我需要知道我必须指定的URL是什么，以便在成功登录/取消后，它将被重定向回应用程序。

http://localhost/callback

以上将解决网址回拨问题。

我知道您无法使用IONIC LINKEDIN PLUGIN，因为它可以在设备上安装LinkedIn应用时运行。

以下是我用来登录LinkedIn并获取登录用户详细信息的代码。

public linkedInLogin(): Promise<any> {
    return new Promise(function (resolve, reject) {

      var browserRef = cordova.InAppBrowser.open("https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=XXXXXXXXX&redirect_uri=http://localhost/callback&state=XXXXXXXX&scope=r_basicprofile%20r_emailaddress")
      browserRef.addEventListener("loadstart", (event) => {
        console.log("event.url 1 -> " + event.url);
        if ((event.url).indexOf("http://localhost/callback") === 0) {
          browserRef.removeEventListener("exit", (event) => { });
          browserRef.close();
          console.log("event.url 2 -> " + event.url);
          var parsedResponse = {};

          var code = (event.url.split("=")[1]).split("&")[0];
          var state = event.url.split("=")[2];

          if (code !== undefined && state !== null) {
            console.log("code : " + code + "  state : " + state);
            parsedResponse["code"] = code;
            //parsedResponse["state"] = state;
            resolve(parsedResponse);
          } else {
            reject("Problem authenticating with LinkedIn");
          }
        }
      });
      browserRef.addEventListener("exit", function (event) {
        reject("The LinkedIn sign in flow was canceled");
      });
    });
  }

在上面的函数中，替换代码和状态，并将您从LinkedIn Developers帐户获得的代码和状态。

public linkLogin() {
    let loader;
    this.platform.ready().then(() => {
      this.linkedInLogin().then(success => {
        console.log(" Success : " + success.code);
        let headers = new Headers({
          'Content-Type': 'application/x-www-form-urlencoded'
        });
        let options = new RequestOptions({
          headers: headers
        });
        var data: any;
        data = "grant_type=authorization_code&code=" + success.code + "&redirect_uri=http://localhost/callback&client_id=XXXXXXXX&client_secret=XXXXXX";

        console.log("data : " + data);
        let body = data;
        console.log("body : " + body);
        this.http.post("https://www.linkedin.com/oauth/v2/accessToken", body, options).toPromise()
          .then(res => {
            let result = res.json();
            console.log("http result : " + result);

            if (result["access_token"] !== undefined) {
              console.log("Done : " + result["access_token"]);
              loader = this.load.create({
                content: "Please wait"
              }).present();

              this.getLinkedInUserDetails(result["access_token"]).then(response => {
                console.log("http response : " + JSON.stringify(response));  

              }).then(() => {

                    console.log("LinkedIn authentication completed.");                  
                    loader.dismiss();

                });
              });
            } else {
              //return resolve("Failed");
              console.log("Failed");
            }
          }, err => {
            console.log(err);
            //return resolve("Failed");
            console.log("Failed");
          });
      }, (error) => {
        console.log("error : " + error);
      });
    });
  }

在上面的函数中，将client_Id和client_Secret替换为你的。

getLinkedInUserDetails(token: string) {
    let headers = new Headers({
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': 'Bearer ' + token//,

    });
    let options = new RequestOptions({
      headers: headers,

    });

    return this.http.get("https://api.linkedin.com/v1/people/~:(id,first-name,last-name,email-address,picture-url)?format=json", options).toPromise()
      .then(res => res.json(), err => err);
  }

这是很长的代码，但我发现这是在离子2中与LinkedIn合作的最佳方法。

希望这个答案有所帮助。

如果您在上面的代码中有任何查询/错误，请告诉我。

离子2：使用链接登录

1 个答案: