Flutter LinkedIn login

A Flutter plugin for allowing users to authenticate with LinkedIn and getting the user’s basic profile

Contents

• Plugin Supported Platforms
• Create app
• Installation
• Import
• Usage
  1. Button widget
  2. LinkedIn user widget
• Profile Picture
• Final Result
• Full Code
• Plugin
• Similar Plugin

Plugin Supported Platforms

Create app

Create an app on the LinkedIn developer page, and copy client_id, client_secret, and redirect_url to your project

Developers | Linkedin

Installation

dependencies:
  linkedin_login: ^1.3.1

Import

import 'package:linkedin_login/linkedin_login.dart';

Usage

• Button widget

This package has a LinkedIn button widget, and you can customize the button color, button text, and icon sizing properties.

LinkedInButtonStandardWidget(
  onTap: linkedInLogin
)

Example

• LinkedIn user widget

LinkedIn User widget handles everything user logging in and error callbacks.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (BuildContext context) =>
      LinkedInUserWidget(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        redirectUrl: redirectUrl,
        clientId: clientId,
        clientSecret: clientSecret,
        onGetUserProfile: (LinkedInUserModel linkedInUser) async{
 
          Map<String, dynamic> postJson = {
            "user_id": linkedInUser.userId,
            "email": linkedInUser.email.elements[0].handleDeep.emailAddress,
            "pic_url": profilePic,
            "name": linkedInUser.firstName.localized.label + ' ' + linkedInUser.lastName.localized.label,
            "token": linkedInUser.token.accessToken,
            "expires_in": linkedInUser.token.expiresIn
          };
          setState(() {
            result = postJson;
          });
          Navigator.of(context).pop();
        },
        catchError: (LinkedInErrorObject error) {
          print('Error description: ${error.description} Error code: ${error.statusCode.toString()}');
        },
      ),
    fullscreenDialog: true,
  ),
);

After executing this you will redirect to the LinkedIn login page. Once the user logins it asks user permission to share a basic profile like this

On allow, you will get these details from LinkedIn.

  String firstName;
  String lastName;
  String accessToken;
  int expiresIn;
  String profilePicture; /// profile picture is not getting
  String email;
  String userId;

Profile Picture

From the plugin, the profile picture is not getting. For this, we need to make
OAuth 2.0 API call using an access token.

Response response = await dio.get(
    "https://api.linkedin.com/v2/me?projection=(profilePicture(displayImage~:playableStreams))",
    options: Options(
        responseType: ResponseType.json,
        sendTimeout: 60000,
        receiveTimeout: 60000,
        headers: {
          HttpHeaders.authorizationHeader: "Bearer ${linkedInUser.token.accessToken}"
        }
    )
);

From the API result having multiple resolution profile picture URLs. Choose your best once.

var profilePic = response.data["profilePicture"]["displayImage~"]["elements"][0]["identifiers"][0]["identifier"];

Final Result

Full Code

You can check out the full example

bloggerraviteja/flutter_linked_in_login_example

Plugin

linkedin_login | Flutter Package

Similar Plugins

flutter_linkedin | Flutter Package

flutter_linkedin_login | Flutter Package

Other plugins have some issues and I didn’t have good experiences. Try your self check them out.

linkedin_auth | Flutter Package

Let me know your feedback in response.
If you want other plugins tutorials let me know in the comments. I’ll try to make it.

Don’t forget to clap and follow me in the medium for more tutorials.

Buy me a coffee