Flutter auth for LinkedIn using V2 APIs and OAuth 2.0
- To get started, first you must create an account on: https://www.linkedin.com/developers/login
- Create an app, and complete necessary steps
- Setup redirect url on
Auth Tab -> OAuth 2.0 Settings -> Redirect URLs - Collect
clientIdandclientSecretfromAuth Tab -> Application Credentials
Before using auth, there are two methods to complete the third step for 3-legged auth. It's important to know that if you ship a client secret with your app, you must make sure that its either kept very secure or the app is not shipped for general public. One method just sends the client secret from the app itself, and the other method expects you to have a service that does it for you and provide a method to parse that response.
For server side authentication, you must have a server that when called with query params, code and state, returns an access token by completing the third leg in the 3-legged auth explained here: https://docs.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow?context=linkedin/context#step-3-exchange-authorization-code-for-an-access-token
Once these are setup, the code usually looks like this:
FlatButton(
onPressed: () async {
await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Scaffold(
appBar: AppBar(
leading: CloseButton(),
),
body: LinkedInLoginView(
clientId: "what_an_id",
redirectUrl: "https://www.example.com",
onError: (String error) {
print(error);
},
onServerResponse: (res){
var parsed = json.decode(res.body);
return AccessToken(parsed["token"], parsed["expiry"]),
},
onTokenCapture: (token) {
this.token = token.token;
Navigator.pop(context, token);
},
))),
);
print("Ended, must've gotten result here: ${this.token}");
},
child: Text("Signup/Login"),
),
After capturing token, one can simply use it to fetch profile, email address and display image.
For client side authentication, you must ship the client secret with the app itself. You can do the auth simply as follows:
FlatButton(
onPressed: () async {
await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Scaffold(
appBar: AppBar(
leading: CloseButton(),
),
body: LinkedInLoginView(
clientId: "what_an_id",
redirectUrl: "https://www.example.com",
onError: (String error) {
print(error);
},
bypassServerCheck: true,
clientSecret: "what_a_secret",
onTokenCapture: (token) {
this.token = token.token;
Navigator.pop(context, token);
},
onServerResponse: (res){
var parsed = json.decode(res.body);
return AccessToken(parsed["token"], parsed["expiry"]),
},
))),
);
print("Ended, must've gotten result here: ${this.token}");
},
child: Text("Signup/Login"),
),
After the end on either of the two methods, you get an AccessToken which you can use to fetch data from LinkedIn. You can also provide multiple scopes manually to
LinkedInLoginView. Normally two scopes are requestedr_liteprofileandr_emailaddress. Basic profile is shown in access but is non accessible by developers without special access from LinkedIn.
FlatButton(
onPressed: () async {
try{
var liteProfile =await LinkedInService.getLiteProfile(token);
print(liteProfile);
var profileImage = await liteProfile.profileImage.getDisplayImageUrl(token);
print(profileImage);
} on LinkedInException catch(e){
print(e.cause);
}
},
child: Text("Get Lite Profile"),
),
Note: Display image is only 100X100 in resolution. Original image requires special access from linkedIn.
FlatButton(
onPressed: () async {
var email = await LinkedInService.getEmailAddress(token);
print(email);
},
child: Text("Get Email address"),
),
FlatButton(
onPressed: () async {
try{
var basicProfile =await LinkedInService.getBasicProfile(token);
print(basicProfile);
var profileImage = await basicProfile.profileImage.getDisplayImageUrl(token);
print(profileImage);
} on LinkedInException catch(e){
print(e.cause);
}
},
child: Text("Get Basic Profile"),
),
Programmatic refresh of tokens is only available to select developers, hence not included in this package. For normal refresh of token, one must check expiry of the access token and re-run the Auth flow before it expires. If the token is not expired, it will skip the login view and directly give you a new token. If it has expired, the login page will appear and user has to login again.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent