Examination of the Code

The following provides a brief explanation of the Inrupt’s JavaScript client libraries usage in the Getting Started: Part 1 application code.

Login Code

The example uses the solid-client-authn-browser library to log in. solid-client-authn-browser is for client-side code only.

Import

From @inrupt/solid-client-authn-browser, import the objects used in the application:

import {
  login,
  handleIncomingRedirect,
  getDefaultSession,
  fetch
} from "@inrupt/solid-client-authn-browser";

Start Login

Start the login process by calling login() with the following options:

  • oidcIssuer, the URL of the user’s Solid identity provider where the user is sent to log in.

  • redirectUrl, the URL where the user, once logged in at the identity provider, will be redirected to finish the login proces. In this example, it is set to window.location.href (i.e., the current page of the application).

To login to a Pod on https://pod.inrupt.com, specify "https://broker.pod.inrupt.com" in the oidcIssuer option.

function loginToInruptDotCom() {
  return login({
    oidcIssuer: "https://broker.pod.inrupt.com",
    redirectUrl: window.location.href,
    clientName: "Getting started app"
  });
}

Note

If your Pod server is not https://pod.inrupt.net or https://inrupt.net, modify the oidcIssuer value accordingly.

The login() function sends the user to the Solid identity provider specified in oidcIssuer. Once logged in at the identity provider, the user is redirected back to the specified redirectURL to finish the login process.

Finish Login

Once logged in at the Solid identity provider, the user is redirected back to the redirectURL. The redirectURL is specified in the login() function call at the start of the login process. The page at this redirectURL (in this example, the current page of the application) calls handleIncomingRedirect() to complete the login process:

// When redirected after login, finish the process by retrieving session information.
async function handleRedirectAfterLogin() {
  await handleIncomingRedirect();

  const session = getDefaultSession();
  if (session.info.isLoggedIn) {
    // Update the page with the status.
    document.getElementById("labelStatus").textContent = "Your session is logged in.";
    document.getElementById("labelStatus").setAttribute("role", "alert");
  }
}

// The example has the login redirect back to the index.html.
// This calls the function to process login information.
// If the function is called when not part of the login redirect, the function is a no-op.
handleRedirectAfterLogin();

The function collects the information provided by the identity provider.

For more information on using the library to authenticate, see Authentication.

Read Profile Code

The example uses the solid-client and vocab-common-rdf libraries to read profile data from a Pod.

Import

From @inrupt/solid-client and @inrupt/vocab-common-rdf, import the objects used in the application:

import {
  getSolidDataset,
  getThing,
  getStringNoLocale
} from "@inrupt/solid-client";

import { VCARD, FOAF } from "@inrupt/vocab-common-rdf";

Get SolidDataset

Use getSolidDataset() to get the Profile Document

The example assumes that the WebID has the URI: <profileDocumentURI>#<fragment> where <profileDocumentURI> is the URI of the SolidDataset that contains profile data. 1

  1. Parse the WebID to get the SolidDataset URI.

    const profileDocumentURI = webID.split('#')[0];
    
  2. Use getSolidDataset to fetch the SolidDataset from the URI.

    const myDataset = await getSolidDataset(profileDocumentURI, { fetch: fetch });
    
    1. For authenticated reads, pass in the URI and the authenticated fetch function as an option.

    2. For unauthenticated reads, pass in the URI. The fetch function (which can be authenticated or unauthenticated) is optional.

A SolidDataset URI does not end with a #<fragment>. Although the getSolidDataset can accept a URI that contains a fragment (such as a WebID 1) and return the SolidDataset located at the URI w/o the fragment, the example uses the SolidDataset URI to help distinguish between a SolidDataset and a Thing.

Get Profile

Use getThing() to get data associated with WebID from SolidDataset

From the fetched SolidDataset, the application uses the getThing to retrieve the profile. A Thing’s URI usually contains a fragment, as in #me in https://pod.inrupt.com/<username>/profile/card#me or https://<username>.inrupt.net/profile/card#me.

const profile = getThing(myDataset, webID);

Get Properties

Use getStringNoLocale() to get the values (of String type) for the specified identifiers

The application uses getStringNoLocale to retrieve the following properties from the profile (a Thing):

Property

Property Identifier

Name or Formatted name

Stored using either

  • http://xmlns.com/foaf/0.1/name on pod.inrupt.com

  • http://www.w3.org/2006/vcard/ns#fn on inrupt.net

The example uses FOAF.name or VCARD.fn convenience object from the vocab-common-rdf library instead of specifying the identifier string.

Role

Stored using the identifier http://www.w3.org/2006/vcard/ns#role.

The example uses VCARD.role convenience object from the vocab-common-rdf library instead of specifying the identifier string.

The following example uses FOAF.name to retrieve the name. Depending on your profile document, the name may be stored under a different identifier:

// Get the formatted name using `FOAF.name` convenience object.
// `FOAF.name` includes the identifier string "http://xmlns.com/foaf/0.1/name".
// As an alternative, you can pass in the "http://xmlns.com/foaf/0.1/name" string instead of `FOAF.name`.

const fn = getStringNoLocale(profile, FOAF.name);

// Get the role using `VCARD.role` convenience object.
// `VCARD.role` includes the identifier string "http://www.w3.org/2006/vcard/ns#role"
// As an alternative, you can pass in the "http://www.w3.org/2006/vcard/ns#role" string instead of `VCARD.role`.

const role = getStringNoLocale(profile, VCARD.role);
1(1,2)

Although the example assumes that the WebID has the URI <profileDocumentURI>#<fragment>, a WebID can also have a URL without the hash fragment. For details, see https://www.w3.org/2005/Incubator/webid/spec/identity/#dfn-webid.