Microsoft Graph API provides a super-easy way to create an app that includes an authentication feature for the Azure Active Directory account. And Azure portal provides a code sample of various types of app. Its code sample has vast features such as login, logout or login state cache and so on using the Microsoft Identity Platform.
This article describes how to acquire the authorization code in case of excepting using the Microsoft Identity Platform.
>>The code sample of this article (refer to the annotation at the end of this article)
・Create client app with ReactJS.NET
Please create the ASP.NET Core web app of ReactJS.NET as the ‘reactnet-webpack’, if needs please refer to the article which described creating the ASP.NET Core web app of ReactJS.NET as ‘reactnet-vanilla’. This article describes instead of it, how to create the ASP.NET Core web app of ReactJS.NET as ‘reactnet-webpack‘.
Create an app project a folder at any place and launch the PowerShell then put a command like a web page above.
***> dotnet new -i React.Template ***> dotnet new reactnet-webpack ***> dotnet run
***any place
Wait for the BuildServiceProvider builds the service once for the first time.
The hosting environment is launched(refer to the article), press [Ctrl]+[C] to terminate it, and close the PowerShell.
Launch windows explorer and go to the folder, then open created solution file with Visual Studio(open .sln file at second time or .csproj file at first time).
At first, build a solution before do debug, when the build has completed, Visual studio can launch a host and a client both. So when Visual Studio can launch the app, Select [React.Sample.Webpack.CoreMvc] list item of [Start Debugging] box and press it. After building the project complete, Visual Studio launches the console as the host and the browser as the client app.
Modify a view and a controller instead of using the React Component for now. Open a controller from the Solution Explorer, open the HomeController.cs in [Controllers] folder of [SampleApp] project and insert three rows above 40th ([return View…] ) row.
Next, to modify a view, open the _Layout.cshtml in [Shared] folder of [Views] folder of [SampleApp] project. And insert the below code in the first child of [Body] tag (between the [Body] start tag and the [@RenderBody] row).
Pres F5 key to run the app.
Swap the 17th row ‘Signin’ character of the _Layout.cshtml to the below code.
<a href="/Account/SignIn" style="text-decoration: none;margin:0px;">
<svg width="180" height="30" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
.fil0:hover {
fill: #4B4B4B;
}
.fnt0 {
font-size: 260px;
font-family: 'Segoe UI Semibold', 'Segoe UI';
text-decoration: none;
}
</style>
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="32" width="182" y="-1" x="-1"/>
</g>
<g>
<title>the functions will work if login completed</title>
<g stroke="null" id="svg_8">
<rect stroke="null" x="0" y="0" id="svg_1" fill="white" height="29.99781" width="180.15944"
class="fil0"/>
</g>
<g stroke="null" id="svg_10">
<rect stroke="null" id="svg_2" fill="#F35325" height="8" width="8" y="5" x="2"/>
<rect stroke="null" id="svg_3" fill="#81BC06" height="8" width="8" y="5" x="11"/>
<rect stroke="null" id="svg_4" fill="#05A6F0" height="8" width="8" y="14" x="2"/>
<rect stroke="null" id="svg_5" fill="#FFBA08" height="8" width="8" y="14" x="11"/>
</g>
<g id="svg_9" stroke="null">
<text x="445" y="333" id="svg_6" class="fnt0" fill="black" stroke="null"
transform="matrix(0.05,0,0,0.06,0,0) ">Sign in to Microsoft Graph</text>
</g>
</g>
</svg>
</a>
This SVG code created at the Method Draw, so it is OK which using text or using SVG. It is important that parameters of [a] tag. In the case of using Method Draw, open the site and create some draw, select [View] menu item and select [Source…] after that, copy the code and paste to _Layout.cshtml.
Pres F5 key to run the app.
The next step is creating a controller and an action for [href] attribute of [a] tag. Create ‘SignIn’ action in the ‘Account’ controller which adds to [Controllers] folder at the Solution Explorer as AccountController.cs file.
Right-click on the [Controllers] folder and select the [Add] item, continue to select the [Class] item.
Define the below code in the AccountController.cs file.
using Microsoft.AspNetCore.Mvc;
namespace React.Sample.Webpack.CoreMvc.Controllers
{
public class AccountController : Controller
{
[Route("Account/SignIn")]
[ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
public void SignIn()
{
var tenant = "__YOUR TENANT__";//this grant_type allows common
var clientId = "__APP CLIENT ID__";
var redirectUri = "http://localhost:9457/home";
Response.Redirect("https://login.microsoftonline.com/" + tenant
+ "/oauth2/v2.0/authorize?client_id=" + clientId + "&redirect_uri="
+ redirectUri + "&grant_type=implicit&response_type=code&scope=User.Read"
);
}
}
}
Insert below code into the first line in [Index] action of the HomeController.cs file.
var query = this.Url.ActionContext.HttpContext.Request.Query;
var code = string.Empty;
var state = string.Empty;
if (query.ContainsKey("code")) code = query["code"];
if (query.ContainsKey("session_state")) state = query["session_state"];
Set a breakpoint anywhere after the place that taking the ‘state’ string variable.
>>The code sample of this article
This sample not includes the [npm] and the [Packeges].
No responses yet