반응형

In the previous post, we created a Custom Copilot that answers questions by crawling specific sites.

2024.10.05 - [Copilot Studio] - Copilot Studio. Create New Copilot

 

In the last post, we deployed it to Teams. This time, it will publish it to an IIS site.

I am not a developer but an engineer. Please consider this as a guide to understand the overall process and flow.

 

https://youtu.be/cx4l5QeFwcY

 

 

Settings in the upper right corner.

 

Security -> Authentication

 

No authentication -> Save

 

Save

 

Publish

 

Publish

 

Click Channels -> Demo website to verify if the deployed Copilot is functioning correctly on the web.

 

Ask a question to verify that it is functioning correctly.

 

Custom website

 

You will receive the embed code as shown below.

 

I have set up a test web server on an IIS server using Visual Studio as shown below. Now, let’s add the Copilot to it.

 

If you would like to build a test environment from scratch, please refer to the articles below.

2024.09.16 - [Microsoft 365/Graph & IIS] - Microsoft Graph & IIS. (1) Setting up the basic testing environment.

2024.09.16 - [Microsoft 365/Graph & IIS] - Microsoft Graph & IIS. (2) Publishing an ASP.NET Sample Page to IIS

 

 

I used Visual Studio as the development environment and added the following code to the Index.cshtml file.

<div style="margin-top: 20px;">
    <iframe src="CopilotURL"
            frameborder="0"
            style="width: 500px; height: 500px;">
    </iframe>
</div>

 

You can also run Copilot on a custom website as shown below.

반응형
반응형

Previous Post

2024.10.03 - [Copilot Studio] - Copilot Studio. How to check specific SharePoint folders

 

It took longer to write this post because the Copilot Studio page was not displaying in English.

From this experience, I learned a few things:

 

1. There is a difference between using English or not in Copilot Studio.

- Two-byte characters like Korean, in particular, could have an impact. It is recommended to test using English first and then check for differences in behavior when using the actual language of use.

 

2. The default region of Power Platform is important.
- Some regions do not support Copilot Studio. If you try to access
https://copilotstudio.microsoft.com from these regions, an error will occur. In this case, you need to create an environment in the Power Platform Admin Center.

 

Copilot Studio is constantly evolving and changing.

So what is true today might change tomorrow.

Let’s try creating a Copilot in Copilot Studio.

This Copilot is similar to what is commonly called a ChatBot. Some people even call it a "Custom Copilot."

The post was created with reference to the materials below.

Quickstart: Create and deploy a copilot - Microsoft Copilot Studio | Microsoft Learn

 

https://youtu.be/wrPf5eZf9io

 

 

Copilot Studio can be accessed at https://copilotstudio.microsoft.com.

 

Create -> New copilot

 

The screen below does not appear in certain languages. I will discuss the impact of the input here in a future post. For now, click Skip to configure.

 

It is recommended to set the default language to English. I plan to create a Copilot that responds based on the content from the MS Learn site.

After entering the information as shown below, click Add knowledge.

 

Public websites

 

Add https://learn.microsoft.com.

 

Add

 

Create

 

Enter a question in the Copilot test chat window on the right to verify that the response is accurate.

 

You can see that the responses reference content from the MS Learn site.

 

Settings in the upper right corner.

 

You can select generative AI responses from the Generative AI menu. This menu is also only available in certain languages.

 

Publish

 

I will deploy it so that users can use it in Teams.

Channels at the top -> Microsoft Teams

 

When you click Open, it will run directly in Teams. If you click Availability options,

 

You can choose sharing or deployment options.

 

Click Open in the previous menu to run Copilot in Teams. Select Add or Open.

 

Ask the Copilot ChatBot questions just like you did during the test.

 

So, what’s the advantage of using it this way? You might have this question.

The benefit is that you can receive precise answers based on the content of a specific site. BizChat generates fairly good responses. However, since it provides answers based on the Bing engine and references various sources like Wiki and blogs, its accuracy can be lower.

반응형
반응형

When specifying a SharePoint URL in Copilot Studio, there may be cases where you need to designate only a specific folder.

 

However, the URL structure in a specific folder may be complicated, making it difficult to designate.

 

Although it's not specific to Copilot Studio, you can refer to the document below for guidance.

Configure Copilot to use specific SharePoint folders | Microsoft Learn

 

Check the folder -> Click Open the Details pane at the top.

 

Path -> Copy direct link

 

Copy and paste directly in Copilot Studio -> Click Add.

 

Path successfully added.

반응형
반응형

Even if the user language is set to English, the Power Platform Admin Center and Copilot Studio pages may not be displayed in English.

 

I couldn't find any official Microsoft documentation to change this to English.

From the comments on the post below, I found that it is affected by the browser's language settings.

Change language settings in Power platform admin center - Microsoft Community Hub

 

I will explain based on the Edge browser.

 

https://youtu.be/KncqZGvB5Ng

 

https://youtube.com/shorts/hlZLwBGAkKs?feature=share

 

 

Go to Settings in the Edge browser.

 

Add the language you want to set in the Language section -> Click the More Options button.

 

Click Display Microsoft Edge in this language. If it is grayed out, click Move to the top.

 

After restarting the browser, the display language will be changed.

반응형
반응형

In this post, we will proceed with enabling and testing the Verified ID feature provided by Microsoft.

 

Entra Admin Center - Verified ID -> Overview -> Get Started

 

Provisioning

 

1. Get your new credential -> Try it now

 

Get my Verified ID

 

A QR Code is generated.

 

Run the Authenticator on mobile.

 

Verified ID -> Scan a QR code

 

Scan the QR code on the screen.

 

Add

 

 

Completed the addition.

 

You can check the record by clicking the issued ID.

 

Clicking "2. Use your new credential -> Try it now" will take you to a page where you can test the Verified ID.

 

Access discounts

 

You can log in using a DID instead of account information. Verify my Employee Credential.

 

QR Code

 

When the camera recognizes the QR code, the Authenticator is launched through the URL.

 

When the camera recognizes the QR code, the Authenticator is launched through the URL.

 

Click "Share" to send the ID information.

 

Verification completed.

 

In the Activity section, you can check where your ID has been used.

 

The test page can be verified with a scenario where employee discounts are applied, as shown below.

반응형
반응형

In order to reduce confusion between Azure AD and Windows Server AD, Microsoft changed Azure AD to Entra ID, marking the beginning of the Entra product family.

Microsoft renamed Azure AD (Azure Active Directory) to Microsoft Entra ID to convey the product's multi-cloud, multi-platform capabilities, alleviate confusion with Windows Server Active Directory, and integrate it into the Microsoft Entra product family.

관련자료: New name for Azure Active Directory - Microsoft Entra | Microsoft Learn

 

This change makes sense because the AD people are familiar with is actually Active Directory Domain Services (AD DS). To put it simply, Azure AD only manages identities, while policies for devices joined to Azure AD are managed by Intune's Configuration Profile. In other words, the cloud version of AD is a combination of Azure AD + Intune. It was difficult to explain this concept to those who have been accustomed to the traditional AD model for a long time.

 

By rebranding it as Entra, Microsoft is positioning it as a comprehensive identity and access management platform. When you access the Entra Management Center, you'll notice that it offers more features than when it was known as Azure AD.

 

Let's take a closer look at Verified ID. We will start with the following technical resource:

Introduction to Microsoft Entra Verified ID - Microsoft Entra Verified ID | Microsoft Learn

 

First, the background for the emergence of Verified ID is as follows:

In today’s world, our digital and physical lives are increasingly intertwined with the apps, services, and devices we use. This digital revolution opens up a world of possibilities, allowing us to connect with numerous companies and individuals in ways previously unimaginable.

However, with this increased connectivity comes a greater risk of identity theft and data breaches. These breaches can have significant impacts on both our personal and professional lives. But there is hope. Microsoft, in collaboration with various communities, has developed a decentralized identity solution that enables individuals to control their own digital identity, offering a secure and private way to manage identity data without relying on centralized authorities or intermediaries.

-> The key here is the Decentralized Identity solution. To be honest, the other concepts are a bit difficult for me to explain in more detail at my current level. Looking at this… if I had deep-dived into identity management alone, I probably wouldn’t have any trouble making a living.

I think I need to test how to use this practically and eventually gain a better understanding through hands-on experience.

 

Lead with open standards

Microsoft has implemented the following standards:

W3C Decentralized Identifier

W3C Verifiable Credentials

DIF Sidetree

DIF Well Known DID Configuration

DIF DID-SIOP

DIF Presentation Exchange

-> This suggests that it's not only something used in M365 but is a concept that can be integrated with other systems, similar to SSO or in a different capacity.

 

What is DID (Decentralized ID)?

DID is an identity management system where individuals, not central authorities or corporations, have direct control over the ownership and management of their identity information.

It ensures the integrity and security of identity information through a decentralized network rather than relying on central servers or institutions. Distributed ledger technologies, such as blockchain, are typically used, with the goal of giving individuals full control over their identity information.

 

So, what is Microsoft Verified ID? My understanding is that it plays the role of the issuer, verifier, and intermediary (Role Modeler).

The content explained by each item in the diagram is as follows:

1. W3C DID (Decentralized Identifier) Number

- A unique ID.

 

2. Trust System

- It verifies and authenticates to check DID documents.

 

3. MS Authenticate App

- Serves as a digital wallet. You can think of it like a wallet where the user stores their ID cards.

 

4. Microsoft Resolver

- An API that uses the did:web method to query and verify DIDs, returning the DDO (DID Document Object).

 

5. Microsoft Entra Verified ID API

- A REST API for issuing and verifying W3C Verifiable Credentials, signed using the did:web method, through Azure’s issuance and verification services.

 

In order to cover this flow in detail, it seems necessary to build a concrete sample environment to fully understand it.

Once I’ve built a sample, posted about it, and gained a reasonable understanding, I will update this post accordingly.

반응형
반응형

Previous Post

2024.09.16 - [Microsoft 365/Graph & IIS] - Microsoft Graph & IIS. (5) Sending emails using the Mail.send permission

 

 

https://youtu.be/YeCf5GNVzf0

 

 

This time, let's add an Email tab to display the contents of Mailfolders.

Currently, the design looks like this. We will add the Email tab between Home and Privacy.

 

_layout.cshtml

 

Add the following content as shown below.

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Mailfolders">Email</a>
</li>

 

Confirm that the addition has been successfully made.

 

 

When clicked, it will be displayed as shown below.

 

반응형
반응형

Previous post

2024.09.16 - [Microsoft 365/Graph & IIS] - Microsoft Graph & IIS. (4) Display Mailbox using the Mail.read permission

 

Continuing from the previous post, this time we will implement the functionality to compose and send emails using the Mail.Send permission of the Graph API.

We'll continue using the project created in the previous post.

 

https://youtu.be/KReqV8EPVh0

 

The process pattern is somewhat established at this point:

Step 1: Add Mail.Send permission

Step 2: Create a ViewModel for sending emails

Step 3: Create a View for composing and sending emails

Step 4: Add the Action Method for sending emails

 

Step 1. Add Mail.Send permission

Appsettings.json

 

Add Mail.Send permission.

 

 

Step 2. Create a View Model for Sending Emails

Create the EmailSendViewModel to hold the data needed for sending emails. This model will include fields like recipient address, email subject, and email body.

 

Create the EmailSendViewModel class

public class EmailSendViewModel
{
        public string To { get; set; } = string.Empty;
        public string Subject { get; set; } = string.Empty;
        public string Body { get; set; } = string.Empty;
}

 

Step 3. Create a View for Sending Emails

Create a view (SendEmail.cshtml) in the Views/Home directory, where users can compose and send emails. This view will use the EmailSendViewModel as its model.

 

Create SendEmail.cshtml

 

Modify the content as shown below.

@model Identity.Models.EmailSendViewModel

<h2>Send Email</h2>

<form asp-action="SendEmail">
    <div class="form-group">
        <label>To</label>
        <input asp-for="To" class="form-control" />
    </div>
    <div class="form-group">
        <label>Subject</label>
        <input asp-for="Subject" class="form-control" />
    </div>
    <div class="form-group">
        <label>Body</label>
        <textarea asp-for="Body" class="form-control"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Send</button>
</form>

 

Step 4. Add Action Method for Sending Emails

Add the SendEmail action method to the HomeController. This method accepts EmailSendViewModel as a parameter and sends an email using the Microsoft Graph API.

 

Modify HomeController.cs.

 

Add the following content.

// GET action method to display the email sending form
[HttpGet]
public IActionResult SendEmail()
{
    return View(new EmailSendViewModel()); // Pass an empty model to the view
}

// Sendemail
[HttpPost]
[AuthorizeForScopes(ScopeKeySection = "MicrosoftGraph:Scopes")]
public async Task<IActionResult> SendEmail(EmailSendViewModel model)
{
    var message = new Message
    {
        Subject = model.Subject,
        Body = new ItemBody
        {
            ContentType = BodyType.Text,
            Content = model.Body
        },
        ToRecipients = new List<Recipient>()
        {
            new Recipient
            {
                EmailAddress = new EmailAddress
                {
                    Address = model.To
                }
            }
        }
    };

    await _graphServiceClient.Me.SendMail(message, null).Request().PostAsync();

    return RedirectToAction("Index");
}

 

Navigate to the Home/sendemail URL.

 

 

Send a test email

 

The test email has been received.

반응형
반응형

Previous Post:

2024.09.16 - [Microsoft 365/Graph & IIS] - Microsoft Graph & IIS. (3) Creating a sample login page using the Microsoft Identity Platform

 

Continuing from the previous post, this time we will use the Mail.Read permission in the Graph API to retrieve mail folders, subject lines, and content, and publish them on IIS.

We will continue using the project created in the previous post.

 

https://youtu.be/tOCCgRloYOo

 

Step 1. Testing Mail.Read Permission

We will test the Mail.Read permission by retrieving only the subject lines of the user's emails on a specific page.

Add the Mail.Read permission to the existing Appsettings.json -> Save the file.

 

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "M365x31504705.onmicrosoft.com",
    "TenantId": "a0c898ca-2445-4e74-ab4b-afd7916549a6",
    "ClientId": "726cf3c0-8faa-4b91-a3dc-4ec4723a411b",
    "CallbackPath": "/signin-oidc"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "MicrosoftGraph": {
    "BaseUrl": "https://graph.microsoft.com/v1.0",
    "Scopes": "user.read mail.read" //Add Mail.read
  }
}

 

 

Modify the HomeController.cs file

 

Add the //Email Titles section to the existing code as shown below.

 

using Identity.Models;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using System.Diagnostics;
using Microsoft.Graph;
using Microsoft.Identity.Web;

namespace Identity.Controllers
{
    [Authorize]
    public class HomeController : Controller
    {
        private readonly GraphServiceClient _graphServiceClient;
        private readonly ILogger<HomeController> _logger;

        public HomeController(ILogger<HomeController> logger, GraphServiceClient graphServiceClient)
        {
            _logger = logger;
            _graphServiceClient = graphServiceClient;
        }

        [AuthorizeForScopes(ScopeKeySection = "MicrosoftGraph:Scopes")]
        public async Task<IActionResult> Index()
        {
            var user = await _graphServiceClient.Me.Request().GetAsync();
            ViewData["GraphApiResult"] = user.DisplayName;
            return View();
        }

        // Email Titles
        [AuthorizeForScopes(ScopeKeySection = "MicrosoftGraph:Scopes")]
        public async Task<IActionResult> EmailTitles()
        {
            var messages = await _graphServiceClient.Me.Messages
                .Request()
                .Select(m => new { m.Subject })
                .GetAsync();

            var titles = messages.Select(m => m.Subject).ToList();
            return View(titles);
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [AllowAnonymous]
        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}

 

Create the View.

Views -> Home -> Add -> View

 

Razor View -> Empty -> Add

 

EmailTitles.cshtml -> Add

 

It will be generated as shown below.

 

Modify the content as follows.

@model List<string>

<h2>Email Titles</h2>
<ul>
@foreach (var title in Model)
{
    <li>@title</li>
}
</ul>

 

Start Debuging -> Log in -> Verify permissions and click Accept.

 

When you navigate to the Home/emailtitles URL, it will be displayed as shown below.

 

When compared with OWA (Outlook Web App), you can see that only the email subjects have been retrieved.

This time, let's create a page that retrieves and displays emails in the following structure: Folder -> Subject -> Body.

 

Step2. Action Method

Action Methods in the controller handle HTTP requests and retrieve data by calling the Microsoft Graph API. We will implement Action Methods such as MailFolders, EmailTitles, and EmailDetails to fetch the list of mail folders, the list of emails in a specific folder, and the detailed content of an email, respectively.

 

Modify the HomeController.cs file

 

Remove the existing Email Titles code.

 

Insert the code for Mail Folders, Titles, and Details respectively.

//MailFolders
public async Task<IActionResult> MailFolders()
{
    var mailFolders = await _graphServiceClient.Me.MailFolders
        .Request()
        .GetAsync();

    return View(mailFolders.CurrentPage.Select(f => new MailFolderViewModel { Id = f.Id, DisplayName = f.DisplayName }).ToList());
}

//EmailTitles
public async Task<IActionResult> EmailTitles(string folderId)
{
    var messages = await _graphServiceClient.Me.MailFolders[folderId].Messages
        .Request()
        .Select(m => new { m.Subject, m.Id })
        .GetAsync();

    var titles = messages.CurrentPage.Select(m => new EmailViewModel { Id = m.Id, Subject = m.Subject }).ToList();
    return View(titles);
}

//EmailDetails
public async Task<IActionResult> EmailDetails(string messageId)
{
    var message = await _graphServiceClient.Me.Messages[messageId]
        .Request()
        .Select(m => new { m.Subject, m.Body })
        .GetAsync();

    var model = new EmailDetailsViewModel
    {
        Subject = message.Subject,
        BodyContent = message.Body.Content
    };

    return View(model);
}

 

Step3. View model

A View Model is a model used to pass data to the View and is used to define the data retrieved from the Action Method. For example, the EmailViewModel includes the email's ID and subject. This allows the data needed in the view to be structured and managed efficiently.

 

Right-Click on the Models folder -> Add -> Class

 

MailFolderViewModel.cs -> Add

 

It will be generated as shown below.

 

Modify it as shown below.

 

namespace Identity.Models
{
    public class MailFolderViewModel
    {
        public string Id { get; set; }
        public string DisplayName { get; set; }
    }
}

 

Similarly, go to Models -> Add -> Class.

 

EmailViewModel.cs -> Next

 

Modify it as shown below -> Save.

namespace Identity.Models
{
    public class EmailViewModel
    {
        public string Id { get; set; }
        public string Subject { get; set; }
    }
}

 

Add EmailDetailsViewModel.cs in the same way.

 

Modify it as shown below -> Save.

public class EmailDetailsViewModel
{
    public string Subject { get; set; }
    public string BodyContent { get; set; }
}

 

Step 4. View

Finally, the View constructs the user interface and displays the data received from the View Model. Create corresponding view files for each action in the Views/Home directory.

 

Views/Home Folder -> Add -> New Item

 

MailFolders.cshtml -> Add

 

Modify as shown below and save.

@model IEnumerable<Identity.Models.MailFolderViewModel>

<h2>Mail Folders</h2>
<ul>
    @foreach (var folder in Model)
    {
        <li><a href="@Url.Action("EmailTitles", "Home", new { folderId = folder.Id })">@folder.DisplayName</a></li>
    }
</ul>

 

Modify the previously created Emailtitles.cshtml file.

@model IEnumerable<Identity.Models.MailFolderViewModel>

<h2>Mail Folders</h2>
<ul>
    @foreach (var folder in Model)
    {
        <li><a href="@Url.Action("EmailTitles", "Home", new { folderId = folder.Id })">@folder.DisplayName</a></li>
    }
</ul>

 

Modify the previously created Emailtitles.cshtml file.

 

Modify it as shown below and save.

@model IEnumerable<Identity.Models.EmailViewModel>

<h2>Emails</h2>
<ul>
    @foreach (var email in Model)
    {
        <li><a href="@Url.Action("EmailDetails", "Home", new { messageId = email.Id })">@email.Subject</a></li>
    }
</ul>

 

Create EmailDetails.cshtml in the same manner as the previously created files.

EmailDetails.cshtml -> Add

@model Identity.Models.EmailDetailsViewModel

<h2>@Model.Subject</h2>
<div>
    @Html.Raw(Model.BodyContent)
</div>

 

Start Debugging

 

Access the path /home/mailfolders.

 

The list of folders is displayed. Click on Inbox.

 

You can now see the list of emails in the Inbox. Click on the email subject to view more details.

 

The email body is displayed.

 

Proceed with the Publish and IIS deployment process as in the previous post. Verify the functionality as shown below.

 

반응형
반응형

Last Post

2024.09.16 - [Microsoft 365/Graph & IIS] - Microsoft Graph & IIS. (2) Publishing an ASP.NET Sample Page to IIS

 

 

In this post, we will create a login page in IIS using an M365 (Entra ID) sample login page.

https://youtu.be/hb7ZDVwJWEE

 

Launch Visual Studio -> Create a new project

 

ASP.NET Core Web App (Model-View-Controller)

 

Specify the Project name-> Next

 

Authentication type -> Microsoft identity platform -> Create

 

Next

 

Sign in -> Microsoft

 

Log in with the administrator account.

 

Create new

 

A browser window pops up. Log in with the administrator account.

 

Authentication complete.

 

Specify the Display name. -> Register

 

Confirm that the creation is successful.-> Next

 

Add Microsoft Graph permissions -> Next

 

Save the Client secret value in a notepad.-> Next

 

Finish

 

Close

 

Close

 

Service is registered, and verify that Secrets.json (Local) has been created.

 

Double-click on the Appsettings.json file.

 

The information for the created app is displayed.

 

The same information is confirmed in Entra ID.

 

Start Debugging

 

After accessing localhost, you're redirected directly to the login page -> Log in with the administrator account.

 

Upon first access, the permissions are displayed as shown below -> Click Accept. -> Accept

 

Display the logged-in account information.

 

When you sign out, the following message is displayed.

 

When you log in with a different account, it displays the information of that account.

 

Build -> Identity

 

Web Server (IIS) -> Next

 

Web Deploy Package -> Next

 

Specify the location to export the package -> Set the Site Name -> Click Finish.

 

Close

 

Publish

 

Once completed, copy the package file to the IIS Server.

 

As done in the previous post, after extracting the files, copy the essential folders and files, such as wwwroot, to the root directory as shown below.

 

Launch IIS Manager

 

Righ-Click on Sites -> Add Website

 

Specify the settings as shown below.

 

When testing on localhost, an Error 500 occurs as shown below. The cause is that the ClientSecret value is not included during publishing, which leads to this issue.

 

Open the Appsettings.json file using Notepad.

 

Add the previously saved Secret Value in the following format -> Save the file:

 

IISRESET

 

Confirm the login process.

 

Proceed with testing by accessing the published URL.

 

A Redirect URI error has occurred.

 

Entra ID Admin center -> Applications -> App registration -> Authentication -> Add the following to Redirect URIs as shown below.

 

Confirm the login process.\

반응형

+ Recent posts