2 | React – Login Sayfası Düzenleme

Bir önceki yazımda kurduğumuz template üzerinden gideceğiz. Web apiye ilk erişimizi login ile olacak. Web Apiyi .net core ile geliştirdim. Jwt token kullanıyor. Refresh token ile güvenliğimizi biraz daha artırıyoruz.

Öncelikli olarak erişim için Axios kullanacağız. Bunun için package.jsonda olmadığı için  kurulum ile başlayacağız.

npm install axios

Artık kurulumuzu yaptık, isteklerimizi bu kütüphane ile yapacağız. Geçici olarak template ile gelen login sayfasını kullanacağız. (src/views/pages/login/Login.js) Kodu aşağıda ki gibi düzenleylim.

import React, { Component } from "react";
import { Link } from "react-router-dom";
import {
  CButton,
  CCard,
  CCardBody,
  CCardGroup,
  CCol,
  CContainer,
  CForm,
  CInput,
  CInputGroup,
  CInputGroupPrepend,
  CInputGroupText,
  CRow,
} from "@coreui/react";
import CIcon from "@coreui/icons-react";
import axios from "axios";

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: "",
    };
  }

  handleChange(e) {
    const targetName = e.target.name;
    const targetValue = e.target.value;
    if (targetName === "username") {
      this.username = targetValue;
    } else if (targetName === "password") {
      this.password = targetValue;
    }
  }

  async onClickBtnGirisYap(e) {
    e.preventDefault();

    const name = this.state.username;
    const pass = this.state.password;

    alert("Servis Bağlantısı Buradan ");

    return true;
  }

  //Setter
  set username(value) {
    this.setState({
      username: value,
    });
  }
  set password(value) {
    this.setState({
      password: value,
    });
  }
  render() {
    return (
      <div className="c-app c-default-layout flex-row align-items-center">
        <CContainer>
          <CRow className="justify-content-center">
            <CCol md="8">
              <CCardGroup>
                <CCard className="p-4">
                  <CCardBody>
                    <CForm>
                      <h1>Login</h1>
                      <p className="text-muted">Sign In to your account</p>
                      <CInputGroup className="mb-3">
                        <CInputGroupPrepend>
                          <CInputGroupText>
                            <CIcon name="cil-user" />
                          </CInputGroupText>
                        </CInputGroupPrepend>
                        <CInput
                          type="text"
                          name="username"
                          placeholder="Username"
                          autoComplete="username"
                          value={this.state.username}
                          onChange={this.handleChange.bind(this)}
                        />
                      </CInputGroup>
                      <CInputGroup className="mb-4">
                        <CInputGroupPrepend>
                          <CInputGroupText>
                            <CIcon name="cil-lock-locked" />
                          </CInputGroupText>
                        </CInputGroupPrepend>
                        <CInput
                          type="password"
                          name="password"
                          placeholder="Password"
                          autoComplete="current-password"
                          value={this.state.password}
                          onChange={this.handleChange.bind(this)}
                        />
                      </CInputGroup>
                      <CRow>
                        <CCol xs="6">
                          <CButton
                            color="primary"
                            className="px-4"
                            onClick={this.onClickBtnGirisYap.bind(this)}
                          >
                            Login
                          </CButton>
                        </CCol>
                        <CCol xs="6" className="text-right">
                          <CButton color="link" className="px-0">
                            Forgot password?
                          </CButton>
                        </CCol>
                      </CRow>
                    </CForm>
                  </CCardBody>
                </CCard>
                <CCard
                  className="text-white bg-primary py-5 d-md-down-none"
                  style={{ width: "44%" }}
                >
                  <CCardBody className="text-center">
                    <div>
                      <h2>Sign up</h2>
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua.
                      </p>
                      <Link to="/register">
                        <CButton
                          color="primary"
                          className="mt-3"
                          active
                          tabIndex={-1}
                        >
                          Register Now!
                        </CButton>
                      </Link>
                    </div>
                  </CCardBody>
                </CCard>
              </CCardGroup>
            </CCol>
          </CRow>
        </CContainer>
      </div>
    );
  }
}

onClickBtnGirisYap fonksiyonun altında bağlantı sağlayabilirsiniz. Geçici olarak aşağada ki kod bloğundan bağlantıyı sağlayabilirsiniz. Bir sonra ki yazımda api erişimini sağlayacak class yapısını yapacağız.

    let istek = {
      grantType: "authorization_code",
      clientId: "xxxxxx",
      refreshToken: null,
      usernameEmail: "",
      password: "",
    };

    let axiosConfig = {
      headers: {
        "Content-Type": "application/json;charset=UTF-8",
        "Access-Control-Allow-Origin": "*",
      },
    };

      axios
        .post(
          "https://xxxx/tokens",
          istek,
          axiosConfig
        )
        .then((res) => {
          console.log("RESPONSE RECEIVED: ", res);

          const cevap = res.data;
          if (cevap.success) {
            alert(cevap.body.accessToken);
          }
        })
        .catch((err) => {
          console.log("AXIOS ERROR: ", err);
        });

https://www.npmjs.com/package/axios

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir