azure-samples/active-directory-b2c-javascript-hellojs-singlepageapp

A single page app, implemented with an ASP.NET Web API backend, that signs up & signs in users using Azure AD B2C and calls the web API using OAuth 2.0 access tokens.

Vanilla JavaScript SPA using Azure AD B2C to Sign-in Users and call a Web API

---

There's a newer version of this sample taking advantage of the Microsoft Authentication Library for JavaScript.

Check it out here: active-directory-b2c-javascript-msal-singlepageapp

If you really need a sample that uses the hello.js library for B2C authentication, you can navigate to the master branch, but please know that it's no longer supported.

active-directory-b2c-javascript-hellojs-singlepageapp's Issues

Backend code

Thanks for this example. However, I'm curious about the backend code of https://fabrikamb2chello.azurewebsites.net.

Would you mind including this in the repo as well?

Add explanation/introduction to Hello.js in the "ReadMe"

Not being previously familiar with Hello.js, it didn't strike me that it was a 3rd party library you were choosing to employ, where it was sourced from, and where I could go to read/learn more about the proper protocol for calling it. That became obvious after diving through the code, but it is perhaps worthy of a small header and paragraph in the ReadMe file to explicitly call attention to it.

Can't set response_type=code to request refresh_token (offline_access)

hello.init({
            adB2CSignInSignUp: applicationId,
            adB2CEditProfile: applicationId
        }, {
            redirect_uri: '../redirect.html',
            scope: 'openid ' + scope,
            response_type: 'token id_token'
        });

In this snippet above I can't set response_type = code to perform explicit Oauth flow (to get refresh_token for hello.js). What should I do?

The token retrieved by this example will expire in 1 hour (by default) and can't be refreshed. How can I refresh the token in silent?

Invoking password reset

Can you post a code snippet on how to invoke the password reset UI using hellojs and B2C.
We are detecting error AADB2C90118 now - but need sample code on actually triggering the reset UI.

Clarify Application ID vs Client ID in the ReadMe How-To instructions

In Step 4 it states:

Copy the client ID generated for your application, so you can use it in the next step.

Note that the Azure Portal B2C blades refer to the "client ID" value as "Application ID"

Angular 4 Azure AD B2C example

Here's a Angular example, maybe your interested in adding it to your samples.

https://github.com/HWouters/ad-b2c-oidc-angular

How to use this with angular 2 app + web api

How to use azure b2c with angular 2 app + web api

Getting user profile from b2c directory

Assuming the user has logged in, is there a way to obtain their profile information with hello.js? Something like:

hello(network.adB2CSignInSignUp).api('/me').then(function (r) {
	console.log(r);
});

Or I need to work directly with the azure graphAPI?

Thanks

Doesn't work AT ALL

This sample does not work at all. I can log in, but when coming back to the app, it shows the starting page again, as if I'm not logged in. It does not matter whether I log in using username/pwd or social login.

Twitter provider doesn't work with popup

If we use popup instead of page then Twitter provider stops working. This issue also happens with MSAL. Is there any way to deal with that in any of the available libraries?

Thanks.

HTML application project contains unneeded references

The HTML project (B2C-v2jsapp) contains several references that actually prevent it from "compiling" - references that seem unnecessary to its running. These include the NuGet references specified in packages.config, as well as project imports (4 of them) in the csproj file, and related errors at the bottom of the csproj file.
As I mentioned, this code fails to run on multiple machines, VS2015 and VS2017(RC) until I remove the NuGet references by deleted packages.config and clean up the csproj file contents by editing the B2C-v2jsapp.csproj file and removing from the top of the file:

<Import Project="..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\build\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props" Condition="Exists('..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\build\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props')" />
 <Import Project="..\packages\Microsoft.Net.Compilers.1.0.0\build\Microsoft.Net.Compilers.props" Condition="Exists('..\packages\Microsoft.Net.Compilers.1.0.0\build\Microsoft.Net.Compilers.props')" />
 <Import Project="..\..\..\..\CxCache\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\build\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props" Condition="Exists('..\..\..\..\CxCache\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\build\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props')" />
 <Import Project="..\..\..\..\CxCache\Microsoft.Net.Compilers.1.0.0\build\Microsoft.Net.Compilers.props" Condition="Exists('..\..\..\..\CxCache\Microsoft.Net.Compilers.1.0.0\build\Microsoft.Net.Compilers.props')" />

and also removing at the end of the csproj file:

    <Error Condition="!Exists('..\..\..\..\CxCache\Microsoft.Net.Compilers.1.0.0\build\Microsoft.Net.Compilers.props')" Text="$([System.String]::Format('$(ErrorText)', '..\..\..\..\CxCache\Microsoft.Net.Compilers.1.0.0\build\Microsoft.Net.Compilers.props'))" />
    <Error Condition="!Exists('..\..\..\..\CxCache\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\build\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props')" Text="$([System.String]::Format('$(ErrorText)', '..\..\..\..\CxCache\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\build\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props'))" />
    <Error Condition="!Exists('..\packages\Microsoft.Net.Compilers.1.0.0\build\Microsoft.Net.Compilers.props')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\Microsoft.Net.Compilers.1.0.0\build\Microsoft.Net.Compilers.props'))" />
    <Error Condition="!Exists('..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\build\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\build\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props'))" />

Admittedly, this was heavy-handed (I could have tried to use more finesse in selecting what to remove, etc), but to get running, that's what worked for me.

Note: I also had to set multiple startup projects in VS (and select both projects to start), which was not specified in the instructions.

How to properly fill scope variable?!?!

Hello,
I am trying reproduce this sample with an ApiApp I developed.

I cannot face how to properly set the variables below:

//API url
var apiURL = 'https://fabrikamb2chello.azurewebsites.net/hello';
var scope = 'openid https://fabrikamb2c.onmicrosoft.com/demoapi/demo.read';

I guess apiURL is the url is the actual address of where the aPI is published, and that's pretty clear.

I totally cannot understand how to set the "scope" variable above: my guess is that "https://fabrikamb2c.onmicrosoft.com/demoapi/" is the appID URI of the ApiAPP, but this is not explained in the article, and also I don't understand where demo.read comes from, and the role of the leading openid word.

Please help.

Thanks :)

I think I don't understand what SPA means

I really thought that I understood what a SPA means but it seems I don't if this application can be called as a SPA. My understanding for a SPA is that I never get redirected from that single application to any other application. So the user experience is no altered nor changed. But from what I see in this sample it is implementing a popup window that again redirects the user. I think the title should e changed as this is not a real SPA.

Mixup with ClientID and TenantId in the Readme instructions

In Step 5, the second code block is prefaced by the instruction:

open the aadb2c.js and replace the clientId and policy names

Note that this should be

open the aadb2c.js and replace the tenantName and policy names

Implement forgot password scenario

When using a combined signup - signin policy in Azure B2C, users have to handle the forgot password scenario themselves. Please take a look at the documentation.

How do I link a sign-up or sign-in policy with a password reset policy?
When you create a sign-up or sign-in policy (with local accounts), you see a Forgot password? link on the first page of the experience. Clicking this link doesn't automatically trigger a password reset policy.
Instead, the error code AADB2C90118 is returned to your app. Your app needs to handle this error code by invoking a specific password reset policy. For more information, see a sample that demonstrates the approach of linking policies.

I would be nice if this example included that scenario.

Using localStorage directly causing issues.

The fixes used to store the state between B2C and the app causes issues in certain circumstances because of it use of localStorage directly. For instance on iOS when an incognito tab is used. A solution that I have found works is to use the hello.utils.store function which checks the access to the storage before use and falls back to cookies when required. I will be happy to submit a PR if this is seen as the correct solution.

CORS Issue

I've implemented the scenario as described but when I attempt to use the "Call API" button I get
"API error: Could not get resource". Looking through the browser log I noticed a CORS error:

index.html:1 Failed to load : Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:65328' is therefore not allowed access. The response had HTTP status code 400.

This is strange because I included http://localhost:65328/ and * in my CORS rules for the WebAPI.
Any ideas?

This application does not have sufficient permissions

I've cloned this repository and after I've replaced the settings with my Azure AD B2C settings, I'm getting the following error:

This application does not have sufficient permissions against this web resource to perform the operation.

Any tips on what is wrong?

Logout button in SUSI policy does not log out.

When I configure and subsequently run the project, then select "Sign-In or Sign-Up Policy Login", use the buttons to do some POST and GET calls, then use the "Sign-Up or Sign-In Policy Logout" button, it refreshes the screen and clears the text, but I am still able to make subsequent calls to GET and POST (via the same buttons) continue to succeed.
Using breakpoints in the Get/Post methods, the breakpoints are still hit, indicating the call is still making it through the Authorization filter (and the ClaimsPrincipal still has a value.)