Ionic 2：登录链接在

Question

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

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(); 

} 

我现在面临着以下问题。

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

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

Answer 1

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

http://localhost/callback

上面会解决URL回调URL的问题。

我知道你不能使用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合作的最佳途径。

让我知道你是否有任何查询/错误在上面的代码。