Guia de início rápido: personalizando seu aplicativo (HTML)

  • Artigo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Seu aplicativo do Tempo de Execução do Windows em JavaScript pode usar o Live SDK para acessar informações da conta da Microsoft do usuário.

Com o aplicativo em execução, o usuário deve entrar com sua conta da Microsoft e autorizar o aplicativo a acessar seus dados. Depois que o usuário entra e concede autorização, o aplicativo pode acessar os dados do perfil do usuário e personalizar a experiência.

Importante  Este guia de início rápido tem fins meramente ilustrativos e demonstrativos. Para usar esse recurso em um aplicativo que deseja carregar na Windows Store e distribuir aos clientes, você precisará incluir um recurso de saída e uma política de privacidade, assim como um recurso de entrada. Após concluir este guia de início rápido, leia os Requisitos para a entrada na conta da Microsoft para obter informações sobre como adicionar esses recursos.

 

Importante  O tutorial deste tópico demonstra um aplicativo da Windows Store. Você também pode adicionar serviços Microsoft a um aplicativo da Loja do Windows Phone.

 

Pré-requisitos

Antes de desenvolver um aplicativo do Tempo de Execução do Windows em JavaScript que use recursos do Windows Live Services, você precisará instalar os softwares necessários no computador de desenvolvimento.

  • As ferramentas e o SDK para desenvolver aplicativos da Windows Store, caso ainda não estejam instalados. Essas ferramentas incluem o Microsoft Visual Studio, entre outras.

  • O Live SDK.

  • Um aplicativo da Windows Store em JavaScript.

    Observação  O código mostrado neste guia de início rápido é adicionado ao modelo Aplicativo em Branco para projetos em JavaScript no Visual Studio.

     

Realizar a entrada do usuário e obter autorização para acesso aos dados

Adicione o código que acessa os recursos do Windows Live Services.

Quando seu aplicativo é executado, ele pode exibir o controle de entrada do Windows para entrada do usuário com a conta da Microsoft. Após a entrada, caso o usuário ainda não tenha autorizado o aplicativo, ele será solicitado a autorizar o acesso do aplicativo às informações de perfil.

Para conectar o usuário quando seu aplicativo está em execução, siga este procedimento em seu projeto:

  1. Defina uma referência para o Live SDK, como esta:

    1. No Gerenciador de Soluções, clique com o botão direito do mouse em Referências > Adicionar Referência....
    2. Vá para Windows > Extensões, e verifique a caixa próxima a Live SDK. Caso não veja o Live SDK na lista, reinstale o Live SDK e tente realizar o procedimento novamente.
    3. Clique em OK para sair da caixa de diálogo.

  2. Adicione a referência ao arquivo wl.js, no arquivo do Live SDK, ao aplicativo. No modelo Aplicativo em Branco de projetos em JavaScript, ela é adicionada a Default.html.

    Na marca <head> do arquivo de código principal do aplicativo e acima do link para o arquivo default.js, adicione uma marca <script> como esta.

    <script src="///LiveSDKHTML/js/wl.js"></script>

  3. Na marca <body> de default.html, adicione o código para conectar o usuário à conta da Microsoft e atualizar a exibição com as informações dele.

    Observação  Essa ação não exibe o controle de entrada na conta da Microsoft quando a conta do computador do usuário está associada à conta da Microsoft. Nesse caso, o aplicativo entra automaticamente.

     

    Na marca <body>, adicione o seguinte código.

    <!--This is where the user's info will be written
 after the user has signed in.-->
<label id="info"></label>

<!--This is the script code that will sign the user in
 and display their name.-->
<script>
    // Initialize the Live Connect features.
    //  This should be called from each file that 
    //  uses Live Connect features.
    WL.init();

    // Sign the user into their Microsoft account or connect 
    //  the app to the Microsoft account the user has associated 
    //  with their computer account.
    WL.login({
            scope: ["wl.signin"]
        }).then(
            function (response) {
                onLoginComplete();
            },
            function (loginError) {
                document.getElementById("info").innerText =
                   "Login Error: " + loginError.error + " - " + loginError.error_description;
            }
        );

    // If the user is signed in, then get their profile info
    function onLoginComplete() {
        WL.api({
            path: "me",
            method: "get"
        }).then(
            function (response) {
                // update the display to show the user's name
                document.getElementById("info").innerText =
                    "Hello " + response.name + "!";
            },
            function (infoError) {
                document.getElementById("info").innerText =
                    "Data Request Error: " + infoError.error.message;
            }
        );
    }
</script>

Resumo e próximas etapas

Neste tópico, você aprendeu como usar o Windows Live Services em seus aplicativos para acessar os dados do usuário nos serviços em nuvem da Microsoft, como Outlook.com e Microsoft OneDrive.

Continue aprendendo mais sobre como usar o Windows Live Services nos tópicos Requisitos para a entrada na conta da Microsoft e Como adicionar serviços Microsoft ao seu aplicativo, onde você encontra uma política de privacidade e explicações sobre como adicionar funções de entrada e saída.