Written by

MuthuKumar

Share

  

Category

see all categories
intranet as a service

How to Get SharePoint Current Users Details from Ionic 3 Mobile App

In this article, we are going to see how to get SharePoint current user details from the Ionic 3 mobile app.  

Before you begin applying what is said in this article, we need to integrate SharePoint & Office 365 authentication process and get the access token process in your Ionic 3 app. Here is an article for both the integration parts:

 How to Authenticate SharePoint & Office 365 from Ionic 3 Mobile App

→ How to Get Access Token and Refresh Token for SharePoint from Ionic 3 Mobile App

The above-mentioned article will help you with the  integration part. So, kindly visit the above mentioned article and download the source code.  

 Once download is completed, open your project directory using terminal.

project directory

 Now, type following command: npm install.

npm install

This command will install all dependencies for project. The project is now ready.

 Now, run the project using the following command:

ionic serve (For Browser)

ionic cordova run android (For Device)

ionic cordova

Here we have used ionic cordova run android command to run device. Make sure that you have connected device and the settings have been set. Once running successfully, we will be able to see following output in your mobile:

From output screen we can see the login page being displayed. Now need to enter username and password to login. After validation success, we will be able to see the home page:

 Office 365 LoginOffice 365 LoginOffice 365 Login

The initial basic setup for SharePoint is now ready in our Ionic app.

Now, let’s start.

 Call the API to get current users details. So, we need to add HttpModule Open app.module.ts file and includes the following code:

import { HttpModule } from '@angular/http';

@NgModule({

            imports: [

    HttpModule

  ]})

export class AppModule { }

 Then, open app.component.ts file and include the following code:

First, we need to declare variable for store a current users value.

public CurrentUser: any;

Next, we need to inject the http object to our constructor part for calling the API method.

      constructor (private _http: Http) { }

URL Structure         

            The following URL format we need to pass to our API call URL field.

https://<your_sharepoint_site_collection_url>/

            _api/web/ currentUser

Here below mentioned method is used to get current users details, Once the method is called successfully we will be able to get response as CurrentUser variable. So, we can use these values to further displaying part.

getCurrentUserDetails() {     

        if (localStorage.getItem("token")) {

            let headers = new Headers();

            headers.append('Authorization', 'Bearer ' + localStorage.getItem("token"));

            headers.append('Content-Type', 'application/json;odata=verbose');

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

            let siteUrl=“https://example.sharepoint.com/”;

            let getUsersUrl=“_api/web/ currentUser”;

 

this._apiGet(siteUrl + getUsersUrl, options)

                .subscribe(

                    (result: any) => {

                        console.log("Result ",result);

                        if (result) {

                            this.CurrentUser = result.value;

                        }

                    }, (error) => {

                        console.log("Error", error);

                    }

                );

        }else{

            console.log("Need to Get Access Token");

        }

    }

In the siteUrl variable we need to give actual SharePoint site collection url. In the getUsersUrl variable, we need to give above mentioned SharePoint siteusers url.

Here the below mentioned method is used to get a list value and convert response as JSON format.

    _apiGet(apiURI: any, options: any) {

        return this._http.get(apiURI, options)

            .map((response: Response) => response.json())  

            .catch(this.errorHandler)

    }

 Here the below mentioned method is used to handle an error.

errorHandler(error: Response) {

        return Observable.throw(error);

    }

 Finally, let’s Call the getCurrentUserDetails method following like this.

            this.getCurrentUserDetails();

In that CurrentUser variable values contains following fields, Id, Email, Login Name, Title, Is Site Admin etc, for more reference I have added response as screenshots.

For more reference, I have added the full source code as attachments. Download and do npm install. This command will install all dependencies for project.  

We hope you learned how to get the SharePoint current user details from Ionic 3 mobile app.

If you have any questions/issues about this article, please let us know in the comments.